如何使用原始选择选项的值更新引导选择的数据原始索引
how to update bootstrap select's data-original-index with original select option's value
我有一个选择按钮,我可以在其中从数据库加载各种列表选项。
我将这个选择按钮转换为引导程序的选择选择器。现在,当它呈现时,它会隐藏原始选择选项并创建自己的视图。
我的选择选项会将 id 呈现为值,它将呈现如下。
<option value="38">option 1</option>
<option value="37">option 2</option>
<option value="36">option 3</option>
但是当我看到引导程序的 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>
这与我的原始选项无关,当我获取所选选项的值时,上面的渲染给我带来了问题。
有没有办法用我的原始选项的值来呈现数据原始索引的值???欢迎任何建议!
您可以将 onchange 事件附加到原始选择。引导程序绑定到该选择中。因此,如果您从引导程序选择一个选项,它将允许您检索所选值。
$(this).find("option:selected").attr("value");
此行查找所选选项并返回属性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>
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 下拉选择可自动更改第二个下拉选择
- 如何使用jQuery选择下拉列表的值
- jquery点击函数select&取消选择
- Windows8应用程序(html&Javascript):从图片库(除了文件选择器)显示图像的另一种方式
- 按照选项卡索引的顺序循环一个jQuery选择
- 在动态创建的元素上获取对特定选择器的引用
- AngularJS-在JSON选择器中使用变量名
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 获取选择框的状态
- 如何在文件打开和调用图像区域选择时获取原始图像大小
- 如何使用原始选择选项的值更新引导选择的数据原始索引
- 如何从Bootstrap日期时间选择器获取原始日期数据
- 如果我不删除事件处理程序'我不知道用于创建此处理程序的原始选择器
- 图例中的AmStockChart值在选择与原始数据集不同的数据集后消失
- 动画选择器到它的原始样式,坏或OK
- 回到链中的原始选择器
- JUMflot如何重新绘制点/选择项目?尝试将项添加到数组中并在不影响原始项的情况下重新绘制它们
- 获取原始选择器
- 如果未选择选项卡,如何使滑块移动回其原始位置