javascript - 使用花式选择选择一个选项

Question

我有一个花哨的选择，其代码类似于以下，但将selected=selected属性添加到选项之一（使用 JS）不会更改当前选择的项目。

<li class="field">
  <div class="picker">
    <select>
      <option value="#" disabled>Favorite Doctor…&lt;/option>
      <option>Colin Baker</option>
      <option>Sylvester McCoy</option>
      <option>Paul McGann</option>
      <option>Christopher Eccleston</option>
      <option>David Tennant</option>
      <option>Matt Smith</option>
    </select>
  </div>
</li>

如何更改所选选项并将此更改反映在选择框中。

Answer 1

设置选定选项后尝试触发更改事件，例如：

$('option:eq(2)').prop('selected',true).trigger('change'); // or .change()

小提琴演示

Answer 2

select.val()通过将 设置为我要选择的选项的文本来解决它。

Answer 3

我通过修改 FS 的代码解决了这个问题。它被:selected用作选择器。将其更改为[selected="selected"]它的行为。在我看来，最好完全避免 FS。我在我正在进行的项目中继承了它。

在我的副本中的第 56 行左右，现在更改为：

triggerHtml = settings.triggerTemplate(sel.find('[selected="selected"]'));