jQuery Chosen:在同一页面上显示多个选择字段
Posted
技术标签:
【中文标题】jQuery Chosen:在同一页面上显示多个选择字段【英文标题】:jQuery Chosen: display multiple select fields on the same page 【发布时间】:2015-12-22 12:25:34 【问题描述】:我使用https://harvesthq.github.io/chosen/ 允许用户在下拉列表中搜索值。
post/create
页面上还有 2 个标签:链接和文本
两个选项卡都有相同的“subreddit_id”字段,使用$(selector).chosen();
但是,选择的 jquery 仅显示在第一个选项卡上,而不显示在第二个选项卡上。如果我从第二个选项卡中删除类名,则会出现一个由我的数据填充的正常下拉列表,如果我添加类 chosen-select
,则根本不会加载字段。
我在两个选项卡上使用相同的字段。
不知道为什么会这样。我已经尝试使用插件提供的示例代码,但它也不起作用
for (var selector in config)
$(selector).chosen(config[selector]);
这是我的代码
<script type="text/javascript">
$(document).ready(function()
$('.chosen-select').chosen();
$('.chosen-select1').chosen();
);
</script>
<div class="bs-posts bs-posts-tabs" data-posts-id="togglable-tabs">
<ul id="myTabs" class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Link</a></li>
<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Text</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home" aria-labelledBy="home-tab">
!! Form::open(['url' => 'posts', 'method' => 'POST']) !!
<p>
!! Form::label('title', 'Title:') !!
!! Form::text('title', null, ['class' => 'form-control', 'id' => 'title']) !!
</p>
<p>
!! Form::label('link', 'Link:') !!
!! Form::text('link', null, ['class' => 'form-control', 'id' => 'link']) !!
</p>
<p>
!! Form::label('subreddit', 'Subreddit:') !!
!! Form::select('subreddit_id', $subreddits, null, ['class' => 'chosen-select']) !!
</p>
<p>
!! Form::submit('Submit Post', ['id' => 'submit', 'class' => 'btn btn-primary']) !!
</p>
!! Form::close() !!
</div>
<div role="tabpanel" class="tab-pane fade" id="profile" aria-labelledBy="profile-tab">
!! Form::open(['url' => 'posts', 'method' => 'POST']) !!
<p>
!! Form::label('title', 'Title:') !!
!! Form::text('title', null, ['class' => 'form-control', 'id' => 'title']) !!
</p>
<p>
!! Form::label('text', 'Text:') !!
!! Form::textarea('text', null, ['class' => 'form-control', 'id' => 'text']) !!
</p>
<p>
!! Form::label('subreddit', 'Subreddit:') !!
!! Form::select('subreddit_id', $subreddits, null, ['class' => 'chosen-select1']) !!
</p>
<p>
!! Form::submit('Submit Post', ['id' => 'submit', 'class' => 'btn btn-primary']) !!
</p>
!! Form::close() !!
</div>
</div>
</div><!-- /tabs -->
【问题讨论】:
你试过用id
s 代替class
吗?
你能创建一个你的案例的样本吗?
我不使用 laravel,填充在 DOM 中的 html 准备好了吗?或者当标签打开时?
啊,你可以尝试在点击第二个选项卡时触发第二个选项卡上的选择。
是的,在我单击第二个选项卡之前,html 已准备就绪,只需使用 firebug 进行检查。这是您要求的 plunk,但由于某种原因,即使一切就绪,单击第二个选项卡也不起作用。 embed.plnkr.co/V57x6YkUOZW0McLpM6BJ/preview
【参考方案1】:
你必须在标签更改中触发插件你可以使用事件shown.bs.tab
事件。
代码:
$(document).ready(function ()
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e)
var target = $(e.target).attr("href") // activated tab
debugger
if (target == '#home')
$('.chosen-select').chosen();
if (target == '#profile')
$('.chosen-select1').chosen();
);
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
);
演示:http://jsfiddle.net/IrvinDominin/o9xp6zcd/
【讨论】:
【参考方案2】:这就是我修复它的方法:
$(document).ready(function()
$('.chosen-select').chosen();
$('.chosen-select1').chosen(width: "100%");
);
【讨论】:
以上是关于jQuery Chosen:在同一页面上显示多个选择字段的主要内容,如果未能解决你的问题,请参考以下文章