代码之家 › 专栏 › 技术社区 › hookedonwinter

为什么不选择打开?

select html

hookedonwinter · 技术社区 · 14 年前

我有一个非常简单的选择下拉列表。在铬合金中,它不会掉下来。代码本身工作正常,下拉式菜单在Safari中工作正常,但出于某种原因,它不会在Chrome中打开。这是HTML:。

<select name=“peake_credit”class=“item_discount”>
<选项>1</选项>
<选项>2</选项>
<选项>3</选项>
&选择/gt;
< /代码> 

应该很简单。这是一个下拉列表…以下是选择、选定但未打开的屏幕截图:


---编辑---


这是一个包含完整源代码的jslidle。下拉列表在jsFiddle视图中对我有效,但在实际站点上无效。


http://jsfiddle.net/hsyvf/


---编辑---


页面上的其他下拉列表工作正常。

<select name="pellet_credit" class="item_discount">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>


应该很简单。这是一个下拉列表…以下是选择、选定但未打开的屏幕截图:


---编辑---


这是一个包含完整源代码的jslidle。下拉列表在jsFiddle视图中对我有效,但在实际站点上无效。


http://jsfiddle.net/HSYvf/


---编辑---


页面上的其他下拉列表工作正常。

8 回复 | 直到 7 年前

meder omuraliev 14 年前

验证HTML以确保没有多余的结束/结束标记。确保你没有通过CSS隐藏选项。

Tim Cooper 13 年前

我对火狐和Chrome也有同样的问题,因为 z-index 形式 -1 .

当改变 Z指数 工作得很好。

Lane 9 年前

当我把一个 <select> 在jquery.sortable()元素中。我从jquery网站上复制了这段代码,.disableselection()方法调用杀死了我的 <选择& .

$(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
});

一旦我移除了 .disableSelection(); (奇怪的是,他们不赞成……)一切都很好。

Nealv 14 年前

我认为你应该为你的选择设定一个值

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

你可以读更多 here

M Katz 11 年前

我正在添加一个答案,只是为了在选定的答案中调出@agos的评论。检查是否有可能从下拉列表中窃取事件的事件处理代码(mousedown、click等)。

Jhayes2118 9 年前

最终导致我出现在这个页面上的是显示被设置为显示:无;在选项元素上

解决方案:

$(yourDropDown).children().show();

Eleanor Zimmermann 8 年前

对我来说,问题是我在 id 宣言。

对于未来的读者,请特别注意您的select元素是否与周围的表单样式不一致。这很可能是一个类没有正确应用的提示,您可能不小心把它放在了错误的位置。

-1

Mr. de Silva 7 年前

当我们开发一种带有列表框的客户机/服务器编程语言时,我们遇到了一个疯狂的问题。虽然输入起作用,但列表框没有起作用。我们有鼠标跟踪它,通过一个bug,$(window).mousedown…默认情况下正在启用。

我们能够跟踪此页面的问题: https://hackernoon.com/finding-that-pesky-listener-thats-hijacking-your-event-javascript-b590593f2a83

以防上述页面消失:

在铬(可能还有其他铬味[歌剧作品])中:

右键单击元素。
单击“检查…”
当显示“元素”时,右面板将具有[样式][计算的][事件侦听器](选项卡)。单击“事件侦听器”。
查找“mouseup”、“mousedown”、“keyup”等,展开您怀疑的内容并将其删除,以查看是否可以解决问题(调试)。
更改代码。

我们所做的是将代码中的“返回假”更改为“返回真”。