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> 

我的問題是，我想顯示「reg_number」如果「car_park_pass」等於「是」，但有它默認是隱藏的。我有以下的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]')的$符號。
• 在最後一行，});，固定件不開
• 通話時準備好文檔的更改功能，它的效率更高
• 選擇通過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>