Question

我想知道是否有可能使用jQuery打开select元素？当选择元素时，或者阻止它关闭。我想要做的是在单击特定选项时在选项列表中添加子元素。这必须像这样工作：

选择某个类别 - ＆gt; 如果存在任何子类别，请将这些子类别添加到原始选择（足够简单），但这必须在不关闭选择下拉框的情况下完成。

这是可能的，还是我必须想办法呢？

由于

Answer 1

你不使用optgroup吗？

<select id="food" name="food">
  <optgroup label="Fruits">
    <option value="1">Apples</option>
    <option value="3">Bananas</option>
    <option value="4">Peaches</option>
    <option value="5">...</option>
  </optgroup>
  <optgroup label="Vegetables">
    <option value="2">Carrots</option>
    <option value="6">Cucumbers</option>
   <option value="7">...</option>
 </optgroup>
 <optgroup label="Baked Goods">
   <option value="8">Apple Pie</option>
   <option value="9">Chocolate Cake</option>
   <option value="10">...</option>
 </optgroup>

这里摆弄（看看它的样子）：http://jsfiddle.net/rn39c/

我认为这可能是您正在寻找的内容，因为类别只是标签，子类别是选项（带有发布到服务器的值）

编辑 - 然后你可以添加一些jQuery到混音（这是非常基本但它的工作原理：你可以尝试改进它）：

$('#food option').hide();

$('optgroup').hover(function(){
   $(this).children('option').show();
}, function(){
    $(this).children('option').hide();
});

在这里摆弄：http://jsfiddle.net/rn39c/1/

Answer 2

我不知道你可以用jQuery做到这一点，但是通过设置选择列表以允许多个选定的选项，你会自动得到符合你标准的东西：

<select multiple="multiple">

<强>更新

如果您需要在某些时候选择标准并在其他时间显示所有选项，您可以考虑根据需要添加和删除multiple属性。

以下是单向更改的quck演示：http://jsfiddle.net/bGJAw/

Answer 3

打开和关闭select元素是一个内部操作，您无法通过JS操作。您可以使用size = 5等的select标记使其始终可见，或者当用户选择某些内容使其“保持打开”时可以通过JS操作size属性，然后在用户结束时将其设置回1相互作用。

Answer 4

我不知道你能看到的是什么，但你也可以尝试使用2个选择元素。第一个将包含您的类别，第二个将根据所选择的categery动态填充。

使用jQuery打开select元素？

4 个答案: