gpt4 book ai didi

javascript - Bootstrap 'select' 样式,使用jquery转化为bootstrap下拉菜单

转载 作者:行者123 更新时间:2023-11-28 09:00:13 24 4
gpt4 key购买 nike

首先,我创建了一个选择列表来选择一个选项,当选择一个选项时,使用 Bootstrap Accordion 组件会在下面显示附加信息。看看它是如何工作的 - http://bootply.com/69516

所以上面的内容也按照我想要的方式工作,但是它看起来很垃圾 - 理想情况下我希望它看起来像 Bootstrap 下拉框。我找到了一些 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(): '&nbsp;';
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');
})

关于javascript - Bootstrap 'select' 样式,使用jquery转化为bootstrap下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17861326/

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