如何使用原始 select 选项的值更新 bootstrap select 的数据原始索引

Question

我有一个 select 按钮，用于从数据库加载各种列表选项。

我将此 select 按钮转换为 bootstrap 的 select-选择器。现在，当它呈现时，它会隐藏原始 select 选项并创建它自己的视图。

我的 select 选项会将 id 呈现为值，并将呈现如下所示。

<option value="38">option 1</option>

<option value="37">option 2</option>

<option value="36">option 3</option>

但是当我看到 bootstrap 的 UI 时，它会有一个名为 data-original-index 的选项，就像这样

<li data-original-index="1">option 1</li>

<li data-original-index="2">option 2</li>

<li data-original-index="3">option 3</li>

这与我的原始选项毫无关系，当我获取 selected 选项的值时，上面的渲染对我造成了问题。

有没有什么方法可以用我的原始选项的值来呈现数据原始索引的值？？？欢迎提出任何建议！

Answer 1

您可以将 onchange 事件附加到原始 select。 Bootstrap 与 select 相关联。因此，如果您 select 来自 bootstrap select 的选项，它将允许您检索 selected 值。

$(this).find("option:selected").attr("value"); 此行查找 selected 选项和 returns 属性 value.

看这个例子：

$(function() {

  $('.selectpicker').on('change', function(){
    var selected = $(this).find("option:selected").attr("value");
    alert(selected);
  });
  
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker">
   <option value="38">option 1</option>
   <option value="37">option 2</option>
   <option value="36">option 3</option>
</select>

如何使用原始 select 选项的值更新 bootstrap select 的数据原始索引

how to update bootstrap select's data-original-index with original select option's value

html

javascript

jquery

twitter-bootstrap

bootstrap-select