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

Question

Кто-нибудь использовал и настраивал какой-то базовый код 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

Answer 1

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

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

Answer 2

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

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

Чтобы избежать появления поля нулевой ширины, вам нужно использовать опцию "width" или убедиться, что ваш оригинальный Select виден при вызове Chosen.

Answer 3

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

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

    }, 
    function(){
         //remove event
    });

Answer 4

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

$(document).ready(function(){
  $('.chosenElement').chosen();
});

Answer 5

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

Answer 6

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

Answer 7

Вы должны быть нацелены на выбор

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

jsFiddle