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>