选择菜单不显示选项答案

【问题标题】：Select Menu not displaying options选择菜单不显示选项
【发布时间】：2014-04-07 17:02:51
【问题描述】：

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

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

【问题讨论】：

您是否为元素类、选择元素或选项元素编写了任何 CSS 规则？页面上的 CSS 可能会影响选择列表的行为。此外，您添加的 jQuery 代码可能会影响其行为。您能否将此信息添加到您的问题描述中。
不，唯一的 css 规则控制着色。我已将其添加到说明中。
你能添加你正在使用的jQuery吗？
尝试删除元素类。改为添加 ID。
也不是在点击时检测更改时使用。

标签： select menu options

【解决方案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>

【讨论】：

我也是这么想的，他可能代码有冲突。

【解决方案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');
});

【讨论】：

我有两个选择菜单，因此需要 class 属性。我正在检测 onclick 事件。 onclick 事件注册良好。没有冲突。当我单击它时，选择下拉列表不显示选项。选项定义明确，通过了必要的 HTML 验证测试，以确保我没有遗漏报价等。
另一个选项是创建一个新项目并检查您的代码，我敢肯定 100% 您有一个 javascript 或 jquery 正在发生冲突，因为我在某些项目中遇到了同样的错误，但是你的项目只是一种意见吗？