引导程序'选择'样式,使用jquery转换为bootstrap下拉列表
Bootstrap 'select' styling, using jquery to transform into bootstrap dropdown
首先,我创建了一个选择列表来选择一个选项,当选择了一个选项时,使用bootstrap手风琴组件在下面显示附加信息。看看它是如何在这里工作的-http://bootply.com/69516
所以上面的内容也是我想要的,但它看起来很垃圾——理想情况下,我希望它看起来像引导程序下拉框。我找到了一些jquery来做这件事(下面),这是插入了jquery的bootply fork-http://bootply.com/69518
不幸的是,它不起作用,我猜转换会删除最初在选择列表中的"值"字段。我仍然可以通过jquery学习,这对我来说太多了!
jQuery(function($){
$('select').each(function(i, e){
if (!($(e).data('convert') == 'no')) {
$(e).hide().wrap('<div class="btn-group" id="select-group-' + i + '" />');
var select = $('#select-group-' + i);
var current = ($(e).val()) ? $(e).val(): ' ';
select.html('<input type="hidden" value="' + $(e).val() + '" name="' + $(e).attr('name') + '" id="' + $(e).attr('id') + '" class="' + $(e).attr('class') + '" /><a class="btn" href="javascript:;">' + current + '</a><a class="btn dropdown-toggle" data-toggle="dropdown" href="javascript:;"><span class="caret"></span></a><ul class="dropdown-menu"></ul>');
$(e).find('option').each(function(o,q) {
select.find('.dropdown-menu').append('<li><a href="javascript:;" data-value="' + $(q).attr('value') + '">' + $(q).text() + '</a></li>');
if ($(q).attr('selected'))
select.find('.dropdown-menu li:eq(' + o + ')').click();
});
select.find('.dropdown-menu a').click(function() {
select.find('input[type=hidden]').val($(this).data('value')).change();
select.find('.btn:eq(0)').text($(this).text());
});
}
});
});
末尾缺少一个分号
$('select[name="panel"]').change(function(event){
var selected = $(this).find('option:selected');
var value = selected.attr("value");
var name= $(this).attr("name");
var selector = '[for-field="'+name+'"]';
$('.accordion-body'+selector).addClass('collapse');
var selectorForValue = selector+'[for-value="'+value+'"]';
var selectedPanel = $('.accordion-body'+ selectorForValue );
selectedPanel.removeClass('collapse');
})
http://bootply.com/69711-无法将两个脚本合并在一起,因此必须对其进行样式设置。
相关文章:
- 如何使用jQuery选择下拉列表的值
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- Javascript按钮下拉列表
- jQuery表单添加不适用于下拉列表
- 将数量文本框转换为下拉列表
- 将Wooccommerce属性下拉列表转换为可点击文本
- 如何将复选框转换为下拉列表
- javascript的事件监听器将下拉列表转换为输入按钮
- 是否可以阻止 选择在Maxitem = 1时转换为下拉列表
- 将 HTML 表转换为下拉列表(或以其他方式获取带有列的选择标记)
- 如何将选择下拉列表转换为 ul 下拉列表
- 如何将无序列表转换为<选择>下拉列表使用jquery
- 引导程序'选择'样式,使用jquery转换为bootstrap下拉列表
- 将下拉列表转换为文本框
- 如何动态地将文本字段转换为下拉列表
- 如何将下拉列表onchange事件转换为列表onclick事件
- 如何使用jquery将多选下拉列表的所有项目(选项)转换为数组
- 将 JavaScript 数组转换为下拉列表 - jQuery
- 使用JS显示下拉列表,并在新窗中将名称和城市值转换为大写
- 如何在Jquery中将下拉列表转换为Json