Выбранный с загрузкой 3 не работает должным образом

У меня есть этот код, который запускает bootstrap modal и загружает его содержимое через $.load(). на странице, которую я загружаю, есть элемент выбора, который я вызываю. Здесь код:

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.find('.modal-body').load('path/page.html',
function(response, status, xhr){

       if(status =="success")
        $("select[name=elementName]").chosen();

    });
});

результаты, которые я получаю, похожи на следующее изображение:

и это мое содержание в HTML:

 <select name="elementName" data-placeholder="Please work.." class="chosen-select">
        <option value="test">Hi</option>
        <option value="test2">bye</option>
 </select>

Ответы

Ответ 1

Применение выбранного после показа модальности должно решить вашу проблему:

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen();
});

Или, когда Chosen был уже применен, уничтожить и повторно использовать:

$('#myModal').on('shown.bs.modal', function () {
  $('.chosen-select', this).chosen('destroy').chosen();
});

Заклинание здесь: http://jsfiddle.net/koenpunt/W6dZV/

Итак, в вашем случае это может быть примерно так:

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.on('shown.bs.modal', function(){
       x.find('.modal-body').load('path/page.html', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen();
           }
       });
   });
});

ИЗМЕНИТЬ

В дополнение к Избранному вы можете использовать Избранную тему Bootstrap

Ответ 2

Попробуйте это, я выкопал в выбранном и узнал, что просто нужно передать параметры с свойством "width", как в этом, или любым другим значением ширины:

$("select").chosen({width: "inherit"})

Ответ 3

Как описано в Allow Chosen для использования в модуле Bootstrap modal, проблема находится в файле chosen.jquery.js. Я нашел его в строке 435 и просто добавил следующий код внутри оператора else. проверьте это, это сработало для меня.

// Fixing problem when the select is not displayed.
   if ( this.form_field.offsetWidth == 0 ) {
      return "" + $(this.form_field).width() + "px";
    }

Ответ 4

Добавление ширины к выбранному классу решит эту проблему.

$('.someClick').click(function(e){
   e.preventDefault();
   x.modal('show');
   x.on('shown.bs.modal', function(){
       x.find('.modal-body').load('path/page.html', function(response, status, xhr){
           if(status == "success"){
               $("select[name=elementName]").chosen({ width:'100%' }); /* add width here !!! */
           }
       });
   });
});

Ответ 5

У меня была такая же проблема сегодня, но мне нужно быстрое решение... но еле скриншот моей проблемы:

Это моя проблема

поэтому я сделал это:

1) Проблема заключается в "ширине", поэтому я видел на консоли это

взгляните на консоль, выберите "выбрать"

2) Я быстро сделал решение, добавив новую "ширину". Как вы можете видеть на предыдущем изображении, существует класс "class=" selected-container selected-container-single, поэтому я взял класс "selected-container", чтобы добавить новую "ширину", когда я вызываю свой "Modal". Здесь мой код:

просто добавьте одну строку

поэтому, в основном я добавил этот код:

$('.chosen-container').css({ 'width':'350px' });

для функции, вызывающей модальную. Не стесняйтесь копировать и вставлять это в свою функцию:) Возможно, это не идеальное решение, но оно работает для меня и, возможно, для вас тоже.

Извините за мой английский, но я изучаю. Я лучше говорю по-испански, чем по-английски. Приветствия

PD: Есть мой результат

Ответ 6

Следующее решение работало для меня (от http://codepen.io/m-e-conroy/pen/ALsdF):

Переопределить класс "модальный":

.modal { 
    display: block;
}