Jquery show div on click of option from a select field don't work in Chrome

Question

I did try a very simple test to display a row when i click on an option of a select field. It does work on every browser i believe, except Chrome. It does nothing at all and when i check the javascript debug console it doesn't even give an error.

<select name="test">
    <option value="1">one</option>
    <option value="2" id="show_div">two</option>
</select>

<div id="show_block" style="display:none;">it works!</div>

The very simple jquery

$('#show_div').click(function(){
    $('#show_block').show();
});

i tried instead of click, change, but no result in Chrome. Idea's?

Answer 1

You don't have an id attribute on your select element, but you reference it by id in your Jquery code. This works in chrome and here it is in JsFiddle.

HTML

<select id="show_div" name="test">
  <option value="1">one</option>
  <option value="2" id="show_div">two</option>
</select>
<div id="show_block" style="display:none;">it works!</div>

Jquery

$('#show_div').change(function(){
  $('#show_block').show();
});​

Answer 2

You shouldn't be binding a click event to an item in a select list, you should bind to the click of the whole select, and then check which item is selected, like this:

$('select').change(function(){
    if ($(this).val() == 2)
    {
          $('.show_block').show();
     }
  });

This question is similar: Click event on select option element in chrome

Answer 3

$('select[name="test"]').change(function() {
    if ($(this).find('#show_div').is(':selected'))
        $('#show_block').show();
});​

Live DEMO