防止选择下拉菜单打开但允许其事件触发。

Question

有没有办法捕获html select事件，并防止html select下拉框打开？（禁用html select不被考虑，因为事件也会被禁用。）

- deepak

---

这可能需要相当多的技巧才能完成。您想要支持哪些浏览器？ - Santosh Gokak

Answer 1

我怀疑这并不能真正防止它打开，但它确保了DropDown始终保持相同的值。

<select name="theselect" onchange="this.selectedIndex = 1;">
    <option value="Red">Red</option>  
    <option value="Green" selected="selected">Green</option>  
    <option value="Blue">Blue</option> 
</select>

- Dominic Barnes

Answer 2

这不会禁用“下拉以打开”功能，但如果您不想选择任何内容，我使用的技巧是使用 <optgroup> 而不是option。然而，我困惑的是为什么您要禁用下拉菜单，但禁用它并不是一个选项...

- Myles

---

嗨，Myles，我想让下拉菜单的事件被触发，以便我可以自己处理它们，但我不希望HTML选择框打开自己的下拉菜单。禁用HTML选择框将防止HTML选择元素的事件被触发。 - deepak

那么你正在制作自定义下拉框？在这种情况下，我不会使用下拉框。我会使用一个<ul>，订阅适当的事件并使用CSS模拟下拉菜单，然后使用javascript设置值来发布值，使用<input type="hidden">。 - Myles

Answer 3

如果你不想使用下拉框，为什么要把它做成一个下拉控件呢？

如果你需要得到下拉框的感觉，可以使用类似下拉框的图片并将其设置为背景。

- rahul

---

谢谢，您能否给我一个例子或参考，让我找到这种方法。 - deepak

为什么建议使用图像？选择框在每个浏览器和操作系统上看起来都不同，因此，如果您想在页面上使用其他使用默认操作的选择框，它们在每个浏览器中都不会匹配。此外，提问者可能只想暂时禁用默认操作，或者在访问者的浏览器设置中未启用JavaScript时回退到默认操作。 - Andy E

Answer 4

我同意Myles的观点：希望以下链接对你有所帮助：

自定义下拉菜单 http://jonathan.tang.name/code/jquery_combobox

Demo: http://jonathan.tang.name/files/jquery_combobox/demo.html

- Kieran

Answer 5

您可以从下拉列表中删除所有选项，或隐藏当前选择元素并将其替换为空元素。

<select id="main">
 <option name="1">1</option>
 <option name="2">2</option>
 <option name="3">3</option>
</select>

<select id="empty" style="display:none;">
</select>


<script>
function disableSelect() {
    document.getElementById('main').style.display = 'none';
    document.getElementById('main').style.display = '';
}
</style>

- Ian McIntyre Silber