gpt4 book ai didi

twitter-bootstrap - Bootstrap 选择数据属性

转载 作者:行者123 更新时间:2023-12-04 07:49:38 25 4
gpt4 key购买 nike

我正在使用 Bootstrap 选择 http://silviomoreto.github.io/bootstrap-select/对于它的一些增强选项。

当我开发 select 的功能时,我使用直接的 html select 响应 jQuery 事件来在选择选项时进行 Ajax 调用。我在每个选项上使用数据属性来定义要传递给 Ajax 调用的参数。

不幸的是,在应用 Bootstrap-select 组件时,它将底层选择转换为带有隐藏 ul 的按钮。我的数据属性无法在转换中幸存下来。有什么方法可以将自定义数据应用到可以在转换中幸存的选项?

这是我生成选择的 ASP.NET MVC 代码:

<select class="selectpicker show-tick btn-kpi btn-kpi-select" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{
<option class="select-chart-column"
data-action="@col.Action"
data-new-id="@col.ID"
data-chart-index="@Model.ChartIndex" >
@col.DisplayDescription()
</option>
}
</select>

我响应点击的 jQuery 代码是这样的:
$('#charts').on('click', '.select-chart-column',
function () {
$this = $(this);
$.shared.mvcAjax("/SelectChartColumn",
{
action: $this.data("action"),
newId: $this.data("new-id"),
chartIndex: $this.data("chart-index")
},
updateChartData);
}
);

生成的html示例如下:
<div class="btn-group bootstrap-select show-tick btn-kpi btn-kpi-select open">
<button type="button" class="btn dropdown-toggle btn-kpi-selector" data-toggle="dropdown">
<div class="filter-option pull-left">
Rate </div>&nbsp;<div class="caret"></div>
</button>
<ul class="dropdown-menu" role="menu" style="max-height: 699px; overflow-y: auto; min-height: 99px;">
<li rel="0">
<a tabindex="0" class="select-chart-column">
<span class="text">
Rate
</span><i class="icon-ok check-mark"></i>
</a>
</li>
<li rel="1">
<a tabindex="0" class="select-chart-column">
<span class="text">
Hours
</span><i class="icon-ok check-mark"></i>
</a></li>
</ul>
</div>

如您所见,列表项在被 Bootstrap 选择代码转换后没有数据属性。

最佳答案

我已经通过使用 data-content 属性解决了这个问题。

<select class="selectpicker show-tick btn-kpi btn-kpi-select chart" data-style="btn-kpi-selector">
@foreach (SelectChartColumnVM col in chartCols)
{
<option data-content="<span class='select-chart-column' data-action='@col.Action'
data-new-id='@col.ID' data-chart-index='@Model.ChartIndex'>
@col.DisplayDescription() </span>">
@col.DisplayDescription()
</option>
}
</select>

分配给 data-content 属性的 span 被插入到生成的列表 html 中。
$('#charts').on('click', 'a > .select-chart-column',
function () {
$this = $(this);
$.shared.mvcAjax("/SelectChartColumn",
{
action: $this.data("action"),
newId: $this.data("new-id"),
chartIndex: $this.data("chart-index")
},
updateChartData);
}
);

我必须小心并更改 jQuery 选择器以仅获取作为 anchor 标记的直接子元素的元素。 Bootstrap 选择转换还将跨度放置在按钮中,以便如果您不这样做,则仅在显示下拉菜单时触发事件。

关于twitter-bootstrap - Bootstrap 选择数据属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21873370/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com