JavaScript取消隐藏文字元素无效

Question

I have searched around the internet but I still can't find a solution to my problem. The issue I have is that I have a HTML selectbox and a text box as follows:

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

The problem I have is that I want to display "reg_number" if "car_park_pass" is equal to "yes" but have it be hidden by default. I have the following javascript which I tried putting in the head and the body but nothing seemed to work:

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

What do I need to do to make this work?

Answer 1

Try this:

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

Answer 2

Here is the 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>

and here is the javascript

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

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

});

You can see it working here http://jsfiddle.net/utn74a0s/

Answer 3

this code works, the problem was using .on()

this jquery code :

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

Answer 4

• You forgot the $ symbol in this code ('select[name=car_park_pass]') .
• In the last line, }); , the brace is not open
• Call the change function when the document is ready, it's more efficient
• Select by ID si more efficient $('#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>