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”等于“是”，我想显示“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]')符号。
在最后一行});，大括号未打开
文档准备就绪时调用更改功能，效率更高
按ID ID选择更高效$('#car_park_pass')

＆＃13;

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

＆＃13;

Javascript取消隐藏文本元素无效

4 个答案: