selected.js :: У кого-нибудь есть реальный рабочий пример?

Кто-нибудь использовал и настраивал базовый код selected.js?

Я скачал js, css и png, скопировал код из примеров, написал свой супер-простой пример, но, должно быть, что-то упустил. Я проверил, что code.jquery.js включен и загружается, то же самое с selected.css.

Когда я пытаюсь вызвать даже очень простое поле SELECT (раскрывающееся меню), я получаю очень маленькое поле, и щелчок по полю ничего не делает. Когда я отключаю selected.js, я просто получаю SELECT со всеми отображаемыми параметрами.

Вот как я добавляю простой SELECT в jQuery (мне нужно заполнить поле динамически, хотя в этом примере все жестко запрограммировано):

    $html = '<select name="items" id="items" multiple="multiple" size="1" class="chosenElement">';
    $html += '<option value="foo">foo</option>';
    $html += '<option value="bar">bar</option>';
    $html += '<option value="baz">baz</option>';
    $html += '<option value="qux">qux</option>';    
    $html += '</select>';

Затем, когда я показываю модальное диалоговое окно, содержащее параметры, я вызываю:

$('.modal-body').html($html);
$('.chosenElement').chosen();

До сих пор я модифицировал и тестировал всевозможные перестановки, гуглил решения или примеры, но, похоже, ничего не работает. Вероятно, это что-то очень глупое, например, где-то пропущена точка с запятой, но я потратил столько времени на эту «10-минутную реализацию», что мне нужно обратиться за помощью.

https://github.com/harvesthq/chosen


jquery jquery-chosen jquery-plugins
person Shawn Spencer    schedule 26.09.2011    source источник
comment
Для тех, кто ищет онлайн-библиотеку Chosen.js, см. cdnjs.com/libraries/chosen.   -  person Adrien Be    schedule 13.06.2014

Ответы (7)


arrow_upward
5
arrow_downward

Если вы действительно хотите протестировать «самый простой» пример, я бы предложил:

  1. Работа с жестко закодированным HTML (по сравнению с динамически добавляемым HTML)
  2. Удалите все атрибуты из элемента select
  3. Добавляйте обратно атрибуты к элементу select только после того, как базовый пример работает нормально.

Обратите внимание, что атрибут multiple="multiple" элемента select заставляет chosen.js вести себя по-другому.

Я запустил ваш код здесь: http://jsfiddle.net/99Dkm/1/

И это работает просто отлично.

Я подозреваю, что проблема не в библиотеке chosen.js, а в том, как вы ее используете (обертка внутри какой-то базовой функции jQuery onready отсутствует или что-то еще).

Обратите внимание, что в моих рабочих примерах на jsFiddle я включил только chosen.css и chosen.jquery.js.

примечание: получите URL-адреса этих файлов (javascript и css) из http://cdnjs.com/libraries/chosen

person Adrien Be    schedule 13.06.2014

arrow_upward
1
arrow_downward

вы должны настроить таргетинг на выбор

$('#items').chosen();

jsFiddle

person Sinetheta    schedule 26.09.2011
comment
Спасибо за ваш отзыв. Возможно, вы могли бы еще раз взглянуть на мои примеры кода в вопросе. В последней строке кода указано, что я вызываю $('.chosenElement').chosen();. Я что-то пропустил? - person Shawn Spencer; 27.09.2011
comment
мой плохой, я не прочитал дальше сгиба. эти коды отлично работают jsfiddle.net/vWKrv/2 - person Sinetheta; 27.09.2011
comment
Ты забавный. Я иногда делаю то же самое. Спасибо, в любом случае. ;-) - person Shawn Spencer; 27.09.2011

arrow_upward
1
arrow_downward

Когда вы заполняете поле динамически, возвращается ли набор результатов JSON с атрибутами «Текст» и «Значение»? Если это не так, Chosen не будет правильно форматировать результаты в своем списке. На самом деле, он их вообще не добавит. Я усвоил это на собственном горьком опыте, потому что мои результаты изначально возвращались с атрибутами «Имя» и «ID».

person WEFX    schedule 03.08.2012

arrow_upward
1
arrow_downward

Попробуйте удалить атрибут size="1" из поля выбора и/или установить атрибут стиля с большей шириной. Chosen основывает ширину сгенерированных элементов на ширине основного поля выбора, поэтому, если ваше поле выбора очень маленькое, выбор Chosen также будет таким же. Надеюсь, это поможет.

person Aaron Hill    schedule 26.04.2013

arrow_upward
1
arrow_downward

Столкнулся с похожей проблемой. Я не смог понять, что было причиной этого, в моей ситуации это сработало:

$j('select').livequery(
    function(){
        $j(this).chosen({width: "300"});
        $j('.search-field input').height(14);

    }, 
    function(){
         //remove event
    });
person user2909409    schedule 23.10.2013

arrow_upward
1
arrow_downward

оберните код jQuery внутри: -

$(document).ready(function(){
  $('.chosenElement').chosen();
});
person Sangram Singh    schedule 24.09.2013

arrow_upward
1
arrow_downward

Документация по выбранным опциям включает:

Если ваш выбор скрыт при создании экземпляра Chosen, вы должны указать ширину, иначе выбор будет отображаться с шириной 0.

Чтобы избежать появления поля с нулевой шириной, вам нужно использовать параметр «ширина» или убедиться, что ваш исходный выбор виден при вызове Chosen.

person rpeh    schedule 20.10.2017