JavaScript取消隱藏文字元素無效

Question

我已經在互聯網上進行搜索，但是仍然找不到解決我問題的方法。 我的問題是我有一個HTML選擇框和一個文本框，如下所示：

 <p>
    <label for="car_parking">Issue a car park pass ?:</label>
    <select name="car_park_pass" id="car_park_pass" tabindex="<?php echo $tab++; ?>">
       <option value="Please select">Please select</option>
       <option value="yes">Yes</option>
       <option value="no">No</option>   
    </select>
 </p>
 <div id="reg_number">  
    <p>
       <label for="car_reg_no">Car registration number</label>
       <input type="text" name="car_reg_no" id="car_reg_no" tabindex="<?php echo $tab++; ?>">
    </p>
 </div>

我的問題是，如果“ car_park_pass”等於“ yes”，我想顯示“ reg_number”，但默認情況下將其隱藏。 我嘗試將以下javascript放在頭部和身體中，但似乎無濟於事：

 $('select[name=car_park_pass]').change(function() 
 {
      if ($(this).val() == 'yes') 
      {
           $('#reg_number').show();
      } 
      else 
      {
           $('#reg_number').hide();
      }
 });

我需要做些什么才能使這項工作？

Answer 1

嘗試這個：

$('select[name=car_park_pass]').change(function() {
  if ($(this).val() == 'yes') 
  {
      $('#reg_number').show();
  } 
  else 
  {
      $('#reg_number').hide();
  }
});

Answer 2

這是HTML

<p><label for="car_parking">Issue a car park pass ?:</label>
 <select name="car_park_pass" id="car_park_pass" tabindex="<?php echo $tab++; ?>">
 <option value="Please select">Please select</option>
 <option value="yes">Yes</option>
 <option value="no">No</option>   
 </select></p>
 <div id="reg_number" style="display:none;">  
 <p><label for="car_reg_no">Car registration number</label>
 <input type="text" name="car_reg_no" id="car_reg_no" tabindex="<?php echo $tab++; ?>"></p>
 </div>

這是javascript

$( "#car_park_pass" ).change(function() {

      if ($(this).val() == 'yes') 
           {
                $('#reg_number').show();
           } 
           else 
           {
                $('#reg_number').hide();
           }

});

您可以在這里查看它的運行情況http://jsfiddle.net/utn74a0s/

Answer 3

此代碼有效，問題出在使用.on()

這個jQuery代碼：

$(document).ready(function(){
    $( "#car_park_pass" ).on( "change", function() {
        if ($(this).val() == 'yes'){
            $('#reg_number').show();
        } 
        else{
            $('#reg_number').hide();
        }
    });
});

Answer 4

• 您在此代碼中忘記了$符號('select[name=car_park_pass]') 。
• 在最后一行， }); ，撐桿未打開
• 准備好文檔后調用change函數，效率更高
• 通過ID si選擇更有效的$('#car_park_pass')

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> <label for="car_parking">Issue a car park pass ?:</label> <select name="car_park_pass" id="car_park_pass"> <option value="Please select">Please select</option> <option value="yes">Yes</option> <option value="no">No</option> </select> </p> <div id="reg_number"> <p> <label for="car_reg_no">Car registration number</label> <input type="text" name="car_reg_no" id="car_reg_no"> </p> </div> <script type="text/javascript"> $(document).ready(function(){ $('#car_park_pass').on('change', function() { if ($(this).val() == 'yes'){ $('#reg_number').show(); } else{ $('#reg_number').hide(); } }); }); </script>