Why this code does not work in Chrome browser?

Question

The following code after clicking on a text display options option. Field operations are done in Firefox but not Chrome operating!

$('.ttt').on('click' , function(){
    var o_class = 's-state-1'; 
    $('#test').text('123');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option class="ttt">test 1</option>
    <option class="ttt">test 2</option>
    <option class="ttt">test 3</option>
    <option class="ttt">test 4</option>
</select>

<div id="test"></div>

Options don't support the click event. Firefox does implement this behaviour but that's just the exception, not the rule. — apokryfos, Apr 07 '16 at 12:07

score 1 · Accepted Answer · answered Apr 07 '16 at 12:05

You need to hook to the change event of the select, not the click event of the option elements. Try this:

$('select').on('change' , function(){
    var o_class = 's-state-1'; 
    $('#test').text('123');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
    <option>test 1</option>
    <option>test 2</option>
    <option>test 3</option>
    <option>test 4</option>
</select>

<div id="test"></div>

Why this code does not work in Chrome browser?

1 Answers1