jQuery Chosen: отображать несколько полей выбора на одной странице

Question

Я использую https://harvesthq.github.io/chosen/, чтобы пользователь мог искать значения в выпадающем списке.

У меня также есть 2 вкладки на post/create странице: Ссылка & Текст

Обе вкладки имеют одинаковое поле «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 --> 

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%"}); 
});