Question

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

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

我的选择选项会将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>

与我的原始选项无关，上面的渲染在我获取所选选项的值时会给我带来问题。

有没有办法用我原来的选项的值来渲染data-original-index的值？欢迎任何建议！

Answer 1

您可以将onchange事件附加到原始选择。 Bootstrap与该选择绑定。因此，如果从引导选择中选择一个选项，它将允许您检索所选值。

$(this).find("option:selected").attr("value");此行搜索所选选项并返回属性value。

见这个例子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何使用原始选择选项的值更新bootstrap select的data-original-index

1 个答案: