Onclick and onkey? How to handle form rules

JavaScript
1

Here’s the JS:

$("#select_2").hide();

$("#select").click(function(){
  if ($("#option_1").not(":selected")){
    $("#select_2").hide();
  }
  if ($("#option_1").is(":selected")){
    $("#select_2").show();
  }
});

The HTML goes something like

<select id="select">
  <option value="something">something</option>
  <option value="something else">something else</option>
  <option id="option_1" value="option_1">OPTION 1</option>
</select>

<select id="select_2">
  <option value="something">something</option>
  <option value="something else">something else</option>
</select>

I have a form that shows a drop down of choices. If the user selects ‘OPTION 1’ from the list, they are shown another drop down with more choices. The second drop down is hidden by default and shown only if ‘OPTION 1’ is selected.

This works fine when using the mouse, but the user can tab to this field, choose ‘OPTION 1’, and the next field does not show because of my onclick event handler. Is there a way I can look for either the keyboard or the mouse?

Thanks for any help with this!

2

You can use the “onchange” event, so something like:

$("#select1").change(function(){ /* your code */ });
3

Is there a way I can look for either the keyboard or the mouse?

Use jQuery’s bind function

$("#select").bind('click change', function() { // your code // });
4

Perfect. Looks like .bind is going to do the trick.

  • Thanks!