1

テーブル行に入力フィールドとオプション ボックスがあるテーブル<tr>があり、オプション ボックスの特定の値が選択された場合にのみ入力フィールドが表示されるようにします。これまでのところ、次のコーディング<tr>があります。入力フィールドで非表示になりますが、再び表示されることはありません。

 $script = <<< EOF
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('#row_sports').hide(); //works


         if($('#sel_rugby').is(':selected') || $('#sel_climbing').is(':selected')){
             $('#row_sports').show();

         }else{
            $('#row_sports').hide();
         }

    });
</script>
EOF;
        echo $script;


    echo '<table border="1">';
    echo '  <tr>';
    echo '      <td>';
    echo '          <select name="sports">';
    echo '              <option>Baseball</option>';
    echo '              <option id="sel_rugby">Rugby</option>';
    echo '              <option>Soccer</option>';
    echo '              <option>Sailing</option>';
    echo '              <option id="sel_climbing">Climbing</option>';
    echo '          </select>';
    echo '      </td>';
    echo '  </tr>';
    echo '  <tr id="row_sports">';
    echo '      <td>';
    echo '          <input name="sports_cl_rg" />';
    echo '      </td>';
    echo '  </tr>';
    echo '</table>';

BR & thx、マイベックス

4

3 に答える 3

1

このコードを試してください：

<script type="text/javascript" charset="utf-8">
    jQuery(document).ready(function($) {
        $('#row_sports').hide(); //works

        $('select[name="sports"]').change(function() {
            var trig = ["Rugby", "Climbing"]; // set elements here

            if (trig.indexOf($(this).val()) > -1) {
                $('#row_sports').show();    
            } else {
                $('#row_sports').hide();
            }
        });

    });
    </script>
于 2012-05-05T10:06:11.500 に答える
1

すべてのオプションに id を入れるか、id の代わりにテキストで比較した方が良いでしょう。つまり、sel_climbing の代わりに Climbing を使用します。また、ページに多くの選択がある可能性があるため、選択してアクセスするための id を指定します。コードどおりに動作するように変更しましたが、必要に応じて私の推奨事項に従うことができます。ここで利用可能なデモ

 $('select').change(function() {
 alert($('#sports option:selected').text());
    $('#row_sports').hide(); //works
   if($('#sports option:selected').attr('id') == "sel_rugby" || $('#sports option:selected').attr('id') == "sel_climbing"){
     $('#row_sports').show();

 }else{
    $('#row_sports').hide();
 }
});​
于 2012-05-05T09:59:41.380 に答える
1 
<script type='text/javascript'>
    jQuery(document).ready(function($) {
        $('#row_sports').hide(); //works

        $('select').change(function() {
         if($('#sel_rugby').is(':selected') || $('#sel_climbing').is(':selected')){
             $('#row_sports').show();

         }else{
            $('#row_sports').hide();
         }
        });

    });
</script>

変更機能も使用してください..ここで機能します

于 2012-05-05T10:01:02.373 に答える