javascript - 如何使用 Jquery-Chosen 插件使第一个选项成为下拉列表中的默认值

Question

我有一个下拉菜单，我需要将其值默认为下拉选项中可用的第一个值。

Js:

$('#chosen').find('ul.active').find('li.child') // will return me an array of options.
   [
     <li class="child" data-option-array-index="1">Abs</li>
     <li class="child" data-option-array-index="2">Abg</li>
     <li class="child" data-option-array-index="3">Abk</li>
   ]

我尝试通过以下方式将其默认为第一个值:

 $('#chosen').find('ul.active').find('li.child').attr('data-option-array-index').prop('selected', true);

但这会返回一个错误。当下拉选项是数组的结果时，我不确定如何选择默认值。有什么想法吗？

Answer 1

从你的代码来看，我猜你正在使用一个插件或库来创建程式化的“下拉菜单”，使用 HTML 列表(即 <ul> 和 <li> 标签)，用 CSS 设置样式来制作它看起来像一个下拉菜单。

您面临的问题是 selected属性特定于 <select>元素，因此尝试将其添加到 <li>这可能是您看到错误的原因。

现在，不知道你使用的是什么插件/库，我可以告诉你，为了确保在“假”下拉列表中所做的选择在提交时仍然传递给服务器，这些下拉列表通常与隐藏的 <select> 相关联在幕后，使用某种形式的 JavaScript，API 中通常还有一个方法允许您手动自动选择您想要的值。

假设我对使用外部插件/库的看法是正确的，我会查看文档以获取有关如何设置默认选择的更多信息。

---

根据您关于您正在使用 jQuery Chosen 插件的评论，并且在查看了 Chosen 网站 (http://harvesthq.github.io/chosen/options.html) 上的选项页面之后，看起来您应该能够简单地放置 selected。 <option>中的属性(property)应用插件的值，它将自动选择生成的下拉列表中的值。

selected, disabled - Chosen automatically highlights selected options and disables disabled options.

如果需要添加selected属性 AFTER 应用插件后，您将使用 JS/jQuery 将属性添加到 <option>您要选择的，然后使用以下内容刷新“已选择”下拉列表:

$('#YOUR_SELECT_ELEMENT').trigger('chosen:updated');