javascript - 使用jquery在wordpress中隐藏带有选项框值的表行

Question

我有一个表格，表格行中有一个输入字段和一个选项框，我想要 <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>';

谢谢， 迈贝克

Answer 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>

也使用 change 函数..在这里它有效