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?

score 4 · Accepted Answer · answered May 10 '12 at 07:54

4

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

Live DEMO

answered May 10 '12 at 07:54

gdoron

147,333
58
291
367

should it be `$('select').change(function(){ if ($(this).find('#show_div').is(':selected')) $('#show_block').show(); });` – rt2800 May 10 '12 at 07:58
+1 for morphing this into the correct answer like a ninja. wow. and a live demo! – snapfractalpop May 10 '12 at 07:58
I did mistype the class, it should have been # but i knew where to go from answer one ( edited version ) Thanks for the very fast answer! it works perfect! :) – Kohlzz May 10 '12 at 08:03

score 1 · Answer 2 · edited May 23 '17 at 11:48

1

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

edited May 23 '17 at 11:48

Community

1
1

answered May 10 '12 at 07:58

Fiona - myaccessible.website

14,481
16
82
117

Note that you "hardcode" the value of the option inside your code. – gdoron May 10 '12 at 08:03
Well yes, but you could argue that using the ID is hardcoding the option within the code. Depends how they want to identify the object... – Fiona - myaccessible.website May 10 '12 at 08:09

score 0 · Answer 3 · answered May 10 '12 at 07:58

0

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();
});

answered May 10 '12 at 07:58

Pastor Bones

7,183
3
36
56

I do not see that in his post, simply that his test did not work. You read minds, do ya? – Pastor Bones May 10 '12 at 08:06
I'm not attacking you personaly. take a look on this [demo](http://jsfiddle.net/ddCA6/1/). – gdoron May 10 '12 at 08:09

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

3 Answers3