为什么此代码在 Chrome 浏览器中不起作用？

Question

单击文本显示选项选项后的以下代码。现场操作在Firefox中完成但未Chrome操作！

$('.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>

Answer 1

您需要挂钩 select 的 change 事件，而不是 option 元素的 click 事件。试试这个：

$('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>

为什么此代码在 Chrome 浏览器中不起作用？

Why this code does not work in Chrome browser?

html

javascript

jquery

google-chrome

option