使用jQuery打开选择元素？答案

【问题标题】：Open select element using jQuery?使用jQuery打开选择元素？
【发布时间】：2011-10-07 14:11:45
【问题描述】：

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

选择一些类别 -> 如果存在任何子类别，请将它们添加到原始选择中（很简单），但这必须在不关闭选择下拉框的情况下完成。

这是可能的还是我必须想办法做到这一点？

谢谢

【问题讨论】：

标签： jquery select options categories

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

Fiddle here（看看它的样子）：http://jsfiddle.net/rn39c/

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

编辑 - 然后你可以添加一些 jQuery 到 w mix （这是非常基本的但它有效：你可以尝试改进它）：

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

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

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

【讨论】：

因为我有 10 个顶级类别，其中大多数有 10 个子类别 - 如果没有必要，我不想向我的用户显示接近 100 个类别...
fiddle 在 ff 中效果很好，但在 chrome 中出现了问题：s
让它在 FF 中工作 - 这看起来很不错.. 想我会处理这个.. 接受的答案 - 谢谢！

【解决方案2】：

我不知道您可以使用 jQuery 执行此操作的任何方式，但是通过将选择列表设置为允许多个选择的选项，您会自动得到符合您条件的内容：

<select multiple="multiple">

更新

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

这是一个单向更改的快速演示：http://jsfiddle.net/bGJAw/

【讨论】：

排序 - 这会完全跳过下拉菜单。我希望下拉菜单在那里，但它必须是动态的..
您始终可以使用 Javascript 附加和分离多个属性。
我认为完全跳过select 并使用某种<div> 或其他任何东西来显示一些css 操作的radio 按钮来代替选择会更容易..

【解决方案3】：

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

【讨论】：

如果将点击时的大小更改为大于 1 的数字并没有达到预期的效果，您别无选择，只能创建一个伪元素。我的意思是你必须编写一个小部件来创建一个覆盖 div，其中列出了可选择的项目并像一个选择元素一样工作，但你对它有更多的控制权。

【解决方案4】：

我不知道您正在寻找的是否可以完成，但您也可以尝试使用 2 个选择元素。第一个将包含您的类别，第二个将根据所选类别动态填充。

【讨论】：