Question

我创建了一个简单的选择菜单

<select class="element">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>

但是，当我点击选择菜单时，没有任何反应。我已经附加了一个jQuery onclick监听器来确定是否正在注册点击并且确实如此。但是，没有显示选项。

是否有任何特殊原因导致选项列表无法显示？

根据要求制定CSS规则：

select {
  height: 25px;
  background: #FFFFFF;
}

$('.element').on('click', function(){
   console.log('clicked');
});

Answer 1

检查此代码：

    ### Listbox
    http://jsfiddle.net/4jkE8/2/

在你的css上试试这个：

select {
  height: 25px;
  background: #FFFFFF;
}
$.noConflict();
$('.element').on('click', function(){
   console.log('clicked');
});

另外我认为您有一个Javascript或Jquery文件存在冲突，请尝试在您的视图中创建此文件：

 <select class="element">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
 </select>
 <script type="text/javascript">$.noConflict();</script>

Answer 2

将您的班级名称更改为其他名称。然后，而不是将其用作类，将其更改为id。然后在你的jQuery中检测on change事件。通常在选择选项时，您只需要其中一个选项。 id属性适用于页面上只有一个元素的情况。

我确信点击事件不适用于选择列表中的所有浏览器。您可以查看此问题：Click event on select option element in chrome

HTML代码：

<select id="status">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>
<select id="status">
   <option value="3">Read Only</option>
   <option value="1">Editable</option>
   <option value="2">Hidden</option>
</select>

JavaScript代码：

$('#status').on('change', function(){
   console.log('changed');
});

选择菜单不显示选项

2 个答案: