jQuery 选择：在同一页显示多个 select 字段

Question

我正在使用 https://harvesthq.github.io/chosen/ 来允许用户在下拉列表中搜索值。

我在 post/create 页面上也有 2 个标签：Link 和文本

两个选项卡都有相同的 "subreddit_id" 字段，该字段正在使用 $(selector).chosen();，但是，选择的 jquery 仅显示在第一个选项卡上，而不显示在第二个选项卡上。如果我从第二个选项卡中删除 class 名称，则正常的下拉列表将显示我的数据，如果我添加 class 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 -->

Answer 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/

Answer 2

我是这样修复的：

$(document).ready(function(){
  $('.chosen-select').chosen();
  $('.chosen-select1').chosen({width: "100%"});
});

jQuery 选择：在同一页显示多个 select 字段

jQuery Chosen: display multiple select fields on the same page

html

jquery

laravel

jquery-chosen