Chosen

~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин Chosen делает длинные громоздкие select'ы более дружелюбными для пользователя. Он работает как с одиночными, так и групповыми полями выбора.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/chosen/chosen.jquery.js"~gt~~lt~/script~gt~
  ~lt~link rel="stylesheet" href="/plagins/chosen/chosen.css" /~gt~
  ~lt~style~gt~
    body{padding-left:30px; font:9pt Arial, sans-serif}
    .box{float:left; height:70px; margin:20px 15px 0 0}
    select{margin-top:5px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~
   ~lt~b~gt~Превращает обычный select...~lt~/b~gt~~lt~br /~gt~
   ~lt~select data-placeholder="Выберите страну" style="width:180px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~ 
      ~lt~option value="United States"~gt~United States~lt~/option~gt~
      ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~ 
      ~lt~option value="Afghanistan"~gt~Afghanistan~lt~/option~gt~ 
      ~lt~option value="Albania"~gt~Albania~lt~/option~gt~ 
      ~lt~option value="Algeria"~gt~Algeria~lt~/option~gt~ 
      ~lt~option value="American Samoa"~gt~American Samoa~lt~/option~gt~ 
      ~lt~option value="Andorra"~gt~Andorra~lt~/option~gt~ 
      ~lt~option value="Angola"~gt~Angola~lt~/option~gt~ 
      ~lt~option value="Anguilla"~gt~Anguilla~lt~/option~gt~ 
      ~lt~option value="Antarctica"~gt~Antarctica~lt~/option~gt~ 
      ~lt~option value="Antigua and Barbuda"~gt~Antigua and Barbuda~lt~/option~gt~ 
      ~lt~option value="Argentina"~gt~Argentina~lt~/option~gt~ 
      ~lt~option value="Armenia"~gt~Armenia~lt~/option~gt~ 
      ~lt~option value="Aruba"~gt~Aruba~lt~/option~gt~ 
      ~lt~option value="Australia"~gt~Australia~lt~/option~gt~ 
      ~lt~option value="Austria"~gt~Austria~lt~/option~gt~ 
      ~lt~option value="Azerbaijan"~gt~Azerbaijan~lt~/option~gt~ 
      ~lt~option value="Bahamas"~gt~Bahamas~lt~/option~gt~ 
      ~lt~option value="Bahrain"~gt~Bahrain~lt~/option~gt~ 
      ~lt~option value="Bangladesh"~gt~Bangladesh~lt~/option~gt~ 
      ~lt~option value="Barbados"~gt~Barbados~lt~/option~gt~ 
      ~lt~option value="Belarus"~gt~Belarus~lt~/option~gt~ 
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~div class="box"~gt~
   ~lt~b~gt~... в красивый и удобный~lt~/b~gt~~lt~br /~gt~
   ~lt~select class="chosen" data-placeholder="Выберите страну" style="width:200px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~ 
      ~lt~option value="United States"~gt~United States~lt~/option~gt~
      ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~ 
      ~lt~option value="Afghanistan"~gt~Afghanistan~lt~/option~gt~ 
      ~lt~option value="Albania"~gt~Albania~lt~/option~gt~ 
      ~lt~option value="Algeria"~gt~Algeria~lt~/option~gt~ 
      ~lt~option value="American Samoa"~gt~American Samoa~lt~/option~gt~ 
      ~lt~option value="Andorra"~gt~Andorra~lt~/option~gt~ 
      ~lt~option value="Angola"~gt~Angola~lt~/option~gt~ 
      ~lt~option value="Anguilla"~gt~Anguilla~lt~/option~gt~ 
      ~lt~option value="Antarctica"~gt~Antarctica~lt~/option~gt~ 
      ~lt~option value="Antigua and Barbuda"~gt~Antigua and Barbuda~lt~/option~gt~ 
      ~lt~option value="Argentina"~gt~Argentina~lt~/option~gt~ 
      ~lt~option value="Armenia"~gt~Armenia~lt~/option~gt~ 
      ~lt~option value="Aruba"~gt~Aruba~lt~/option~gt~ 
      ~lt~option value="Australia"~gt~Australia~lt~/option~gt~ 
      ~lt~option value="Austria"~gt~Austria~lt~/option~gt~ 
      ~lt~option value="Azerbaijan"~gt~Azerbaijan~lt~/option~gt~ 
      ~lt~option value="Bahamas"~gt~Bahamas~lt~/option~gt~ 
      ~lt~option value="Bahrain"~gt~Bahrain~lt~/option~gt~ 
      ~lt~option value="Bangladesh"~gt~Bangladesh~lt~/option~gt~ 
      ~lt~option value="Barbados"~gt~Barbados~lt~/option~gt~ 
      ~lt~option value="Belarus"~gt~Belarus~lt~/option~gt~ 
    ~lt~/select~gt~
  ~lt~/div~gt~

  ~lt~div class="box"~gt~
   ~lt~b~gt~И групповой select...~lt~/b~gt~~lt~br /~gt~
   ~lt~select data-placeholder="Выберите страны" style="width:180px;" multiple tabindex="3"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~ 
      ~lt~option value="United States"~gt~United States~lt~/option~gt~
      ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~ 
      ~lt~option value="Afghanistan"~gt~Afghanistan~lt~/option~gt~ 
      ~lt~option value="Albania"~gt~Albania~lt~/option~gt~ 
      ~lt~option value="Algeria"~gt~Algeria~lt~/option~gt~ 
      ~lt~option value="American Samoa"~gt~American Samoa~lt~/option~gt~ 
      ~lt~option value="Andorra"~gt~Andorra~lt~/option~gt~ 
      ~lt~option value="Angola"~gt~Angola~lt~/option~gt~ 
      ~lt~option value="Anguilla"~gt~Anguilla~lt~/option~gt~ 
      ~lt~option value="Antarctica"~gt~Antarctica~lt~/option~gt~ 
      ~lt~option value="Antigua and Barbuda"~gt~Antigua and Barbuda~lt~/option~gt~ 
      ~lt~option value="Argentina"~gt~Argentina~lt~/option~gt~ 
      ~lt~option value="Armenia"~gt~Armenia~lt~/option~gt~ 
      ~lt~option value="Aruba"~gt~Aruba~lt~/option~gt~ 
      ~lt~option value="Australia"~gt~Australia~lt~/option~gt~ 
      ~lt~option value="Austria"~gt~Austria~lt~/option~gt~ 
      ~lt~option value="Azerbaijan"~gt~Azerbaijan~lt~/option~gt~ 
      ~lt~option value="Bahamas"~gt~Bahamas~lt~/option~gt~ 
      ~lt~option value="Bahrain"~gt~Bahrain~lt~/option~gt~ 
      ~lt~option value="Bangladesh"~gt~Bangladesh~lt~/option~gt~ 
      ~lt~option value="Barbados"~gt~Barbados~lt~/option~gt~ 
      ~lt~option value="Belarus"~gt~Belarus~lt~/option~gt~ 
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~div class="box"~gt~
   ~lt~b~gt~... тоже :-)~lt~/b~gt~~lt~br /~gt~
   ~lt~select class="chosen" data-placeholder="Выберите страны" style="width:200px;" multiple tabindex="3"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~ 
      ~lt~option value="United States"~gt~United States~lt~/option~gt~
      ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~ 
      ~lt~option value="Afghanistan"~gt~Afghanistan~lt~/option~gt~ 
      ~lt~option value="Albania"~gt~Albania~lt~/option~gt~ 
      ~lt~option value="Algeria"~gt~Algeria~lt~/option~gt~ 
      ~lt~option value="American Samoa"~gt~American Samoa~lt~/option~gt~ 
      ~lt~option value="Andorra"~gt~Andorra~lt~/option~gt~ 
      ~lt~option value="Angola"~gt~Angola~lt~/option~gt~ 
      ~lt~option value="Anguilla"~gt~Anguilla~lt~/option~gt~ 
      ~lt~option value="Antarctica"~gt~Antarctica~lt~/option~gt~ 
      ~lt~option value="Antigua and Barbuda"~gt~Antigua and Barbuda~lt~/option~gt~ 
      ~lt~option value="Argentina"~gt~Argentina~lt~/option~gt~ 
      ~lt~option value="Armenia"~gt~Armenia~lt~/option~gt~ 
      ~lt~option value="Aruba"~gt~Aruba~lt~/option~gt~ 
      ~lt~option value="Australia"~gt~Australia~lt~/option~gt~ 
      ~lt~option value="Austria"~gt~Austria~lt~/option~gt~ 
      ~lt~option value="Azerbaijan"~gt~Azerbaijan~lt~/option~gt~ 
      ~lt~option value="Bahamas"~gt~Bahamas~lt~/option~gt~ 
      ~lt~option value="Bahrain"~gt~Bahrain~lt~/option~gt~ 
      ~lt~option value="Bangladesh"~gt~Bangladesh~lt~/option~gt~ 
      ~lt~option value="Barbados"~gt~Barbados~lt~/option~gt~ 
      ~lt~option value="Belarus"~gt~Belarus~lt~/option~gt~ 
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $('.chosen').chosen();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Группировка значений~lt~/tit~gt~
~lt~coment~gt~Chosen поддерживает возможность группировать элементы select с помощью ~lt~optgroup~gt~.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/chosen/chosen.jquery.js"~gt~~lt~/script~gt~
  ~lt~link rel="stylesheet" href="/plagins/chosen/chosen.css" /~gt~
  ~lt~style~gt~
    body{padding-left:30px; font:9pt Arial, sans-serif}
    .box{float:left; height:70px; margin:20px 15px 0 0}
    select{margin-top:5px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~
   ~lt~select data-placeholder="Выберите любимую команду" style="width:200px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~
      ~lt~optgroup label="NFC EAST"~gt~
        ~lt~option~gt~Dallas Cowboys~lt~/option~gt~
        ~lt~option~gt~New York Giants~lt~/option~gt~
        ~lt~option~gt~Philadelphia Eagles~lt~/option~gt~
        ~lt~option~gt~Washington Redskins~lt~/option~gt~
      ~lt~optgroup~gt~
      ~lt~optgroup label="NFC NORTH"~gt~
        ~lt~option~gt~Chicago Bears~lt~/option~gt~
        ~lt~option~gt~Detroit Lions~lt~/option~gt~
        ~lt~option~gt~Green Bay Packers~lt~/option~gt~
        ~lt~option~gt~Minnesota Vikings~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC SOUTH"~gt~
        ~lt~option~gt~Atlanta Falcons~lt~/option~gt~
        ~lt~option~gt~Carolina Panthers~lt~/option~gt~
        ~lt~option~gt~New Orleans Saints~lt~/option~gt~
        ~lt~option~gt~Tampa Bay Buccaneers~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC WEST"~gt~
        ~lt~option~gt~Arizona Cardinals~lt~/option~gt~
        ~lt~option~gt~St. Louis Rams~lt~/option~gt~
        ~lt~option~gt~San Francisco 49ers~lt~/option~gt~
        ~lt~option~gt~Seattle Seahawks~lt~/option~gt~
      ~lt~/optgroup~gt~
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~div class="box"~gt~
   ~lt~select class="chosen" data-placeholder="Выберите любимые команды" multiple style="width:200px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~
      ~lt~optgroup label="NFC EAST"~gt~
        ~lt~option~gt~Dallas Cowboys~lt~/option~gt~
        ~lt~option~gt~New York Giants~lt~/option~gt~
        ~lt~option~gt~Philadelphia Eagles~lt~/option~gt~
        ~lt~option~gt~Washington Redskins~lt~/option~gt~
      ~lt~optgroup~gt~
      ~lt~optgroup label="NFC NORTH"~gt~
        ~lt~option~gt~Chicago Bears~lt~/option~gt~
        ~lt~option~gt~Detroit Lions~lt~/option~gt~
        ~lt~option~gt~Green Bay Packers~lt~/option~gt~
        ~lt~option~gt~Minnesota Vikings~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC SOUTH"~gt~
        ~lt~option~gt~Atlanta Falcons~lt~/option~gt~
        ~lt~option~gt~Carolina Panthers~lt~/option~gt~
        ~lt~option~gt~New Orleans Saints~lt~/option~gt~
        ~lt~option~gt~Tampa Bay Buccaneers~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC WEST"~gt~
        ~lt~option~gt~Arizona Cardinals~lt~/option~gt~
        ~lt~option~gt~St. Louis Rams~lt~/option~gt~
        ~lt~option~gt~San Francisco 49ers~lt~/option~gt~
        ~lt~option~gt~Seattle Seahawks~lt~/option~gt~
      ~lt~/optgroup~gt~
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $('select').chosen();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~selected и disabled~lt~/tit~gt~
~lt~coment~gt~Элементы выбора, с атрибутом selected окажутся выбранными по умолчанию. А с атрибутом disabled - не войдут в список выбора. В списках данного примера убраны по 2 элемента (для того чтобы убедиться в этом можно посмотреть исходный код).~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/chosen/chosen.jquery.js"~gt~~lt~/script~gt~
  ~lt~link rel="stylesheet" href="/plagins/chosen/chosen.css" /~gt~
  ~lt~style~gt~
    body{padding-left:30px; font:9pt Arial, sans-serif}
    .box{float:left; height:70px; margin:20px 15px 0 0}
    select{margin-top:5px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~
   ~lt~select data-placeholder="Выберите любимую команду" style="width:200px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~
      ~lt~optgroup label="NFC EAST"~gt~
        ~lt~option disabled~gt~Dallas Cowboys~lt~/option~gt~
        ~lt~option disabled~gt~New York Giants~lt~/option~gt~
        ~lt~option selected~gt~Philadelphia Eagles~lt~/option~gt~
        ~lt~option~gt~Washington Redskins~lt~/option~gt~
      ~lt~optgroup~gt~
      ~lt~optgroup label="NFC NORTH"~gt~
        ~lt~option~gt~Chicago Bears~lt~/option~gt~
        ~lt~option~gt~Detroit Lions~lt~/option~gt~
        ~lt~option~gt~Green Bay Packers~lt~/option~gt~
        ~lt~option~gt~Minnesota Vikings~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC SOUTH"~gt~
        ~lt~option~gt~Atlanta Falcons~lt~/option~gt~
        ~lt~option~gt~Carolina Panthers~lt~/option~gt~
        ~lt~option~gt~New Orleans Saints~lt~/option~gt~
        ~lt~option~gt~Tampa Bay Buccaneers~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC WEST"~gt~
        ~lt~option~gt~Arizona Cardinals~lt~/option~gt~
        ~lt~option~gt~St. Louis Rams~lt~/option~gt~
        ~lt~option~gt~San Francisco 49ers~lt~/option~gt~
        ~lt~option~gt~Seattle Seahawks~lt~/option~gt~
      ~lt~/optgroup~gt~
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~div class="box"~gt~
   ~lt~select class="chosen" data-placeholder="Выберите любимые команды" multiple style="width:200px;" tabindex="1"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~
      ~lt~optgroup label="NFC EAST"~gt~
        ~lt~option selected~gt~Dallas Cowboys~lt~/option~gt~
        ~lt~option selected~gt~New York Giants~lt~/option~gt~
        ~lt~option disabled~gt~Philadelphia Eagles~lt~/option~gt~
        ~lt~option~gt~Washington Redskins~lt~/option~gt~
      ~lt~optgroup~gt~
      ~lt~optgroup label="NFC NORTH"~gt~
        ~lt~option~gt~Chicago Bears~lt~/option~gt~
        ~lt~option~gt~Detroit Lions~lt~/option~gt~
        ~lt~option~gt~Green Bay Packers~lt~/option~gt~
        ~lt~option~gt~Minnesota Vikings~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC SOUTH"~gt~
        ~lt~option~gt~Atlanta Falcons~lt~/option~gt~
        ~lt~option~gt~Carolina Panthers~lt~/option~gt~
        ~lt~option~gt~New Orleans Saints~lt~/option~gt~
        ~lt~option~gt~Tampa Bay Buccaneers~lt~/option~gt~
      ~lt~/optgroup~gt~
      ~lt~optgroup label="NFC WEST"~gt~
        ~lt~option~gt~Arizona Cardinals~lt~/option~gt~
        ~lt~option~gt~St. Louis Rams~lt~/option~gt~
        ~lt~option~gt~San Francisco 49ers~lt~/option~gt~
        ~lt~option~gt~Seattle Seahawks~lt~/option~gt~
      ~lt~/optgroup~gt~
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $('select').chosen();
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Отмена при единичном поиске~lt~/tit~gt~
~lt~coment~gt~По умолчанию, при работе с единичным полем выбора, выбираемый элемент можно поменять, но нельзя отменить. Чтобы такая возможность появилась, необходимо установить свойство allow_single_deselect в true. Кроме этого, нужно, чтобы первый из элементов выбора был пустым.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/chosen/chosen.jquery.js"~gt~~lt~/script~gt~
  ~lt~link rel="stylesheet" href="/plagins/chosen/chosen.css" /~gt~
  ~lt~style~gt~
    body{padding-left:30px; font:9pt Arial, sans-serif}
    .box{float:left; height:70px; margin:20px 15px 0 0}
    select{margin-top:5px}
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div class="box"~gt~
    ~lt~select data-placeholder="Выберите страну" style="width:300px;"~gt~
      ~lt~option value=""~gt~~lt~/option~gt~ 
      ~lt~option value="United States"~gt~United States~lt~/option~gt~
      ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~ 
      ~lt~option value="Afghanistan" selected~gt~Afghanistan~lt~/option~gt~ 
      ~lt~option value="Albania"~gt~Albania~lt~/option~gt~ 
      ~lt~option value="Algeria"~gt~Algeria~lt~/option~gt~ 
      ~lt~option value="American Samoa"~gt~American Samoa~lt~/option~gt~ 
      ~lt~option value="Andorra"~gt~Andorra~lt~/option~gt~ 
      ~lt~option value="Angola"~gt~Angola~lt~/option~gt~ 
      ~lt~option value="Anguilla"~gt~Anguilla~lt~/option~gt~ 
      ~lt~option value="Antarctica"~gt~Antarctica~lt~/option~gt~ 
      ~lt~option value="Antigua and Barbuda"~gt~Antigua and Barbuda~lt~/option~gt~ 
      ~lt~option value="Argentina"~gt~Argentina~lt~/option~gt~ 
      ~lt~option value="Armenia"~gt~Armenia~lt~/option~gt~ 
      ~lt~option value="Aruba"~gt~Aruba~lt~/option~gt~ 
      ~lt~option value="Australia"~gt~Australia~lt~/option~gt~ 
      ~lt~option value="Austria"~gt~Austria~lt~/option~gt~ 
      ~lt~option value="Azerbaijan"~gt~Azerbaijan~lt~/option~gt~ 
      ~lt~option value="Bahamas"~gt~Bahamas~lt~/option~gt~ 
      ~lt~option value="Bahrain"~gt~Bahrain~lt~/option~gt~ 
      ~lt~option value="Bangladesh"~gt~Bangladesh~lt~/option~gt~ 
      ~lt~option value="Barbados"~gt~Barbados~lt~/option~gt~ 
      ~lt~option value="Belarus"~gt~Belarus~lt~/option~gt~ 
    ~lt~/select~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $('select').chosen({allow_single_deselect:true});
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Плагин Chosen позволяет сделать длинные громоздкие select'ы более дружелюбными для пользователя. Он работает как с одиночными, так и групповыми полями выбора.

Подключение

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery, а так же файлы js и css плагина: (их можно скачать на github):

~lt~script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="chosen.jquery.min.js"~gt~~lt~/script~gt~
~lt~link rel="stylesheet" href="chosen.css" charset="utf-8" /~gt~

в папку с css нужно поместить файл со спрайтами плагина chosen-sprite.png (его можно найти вместе с другими файлами скачанного плагина).

Chosen реализован не только как плагин jQuery, но и как плагин к js-библиотеке Prototype. Файлы для Prototype имеют в имени часть proto — их подключать к странице не нужно.

Использование

Chosen поддерживает работу с группирующими элементами <optgroup>, а так же атрибутами selected и disabled у выбираемых элементов (<option>).

Чтобы установить в поле выбора вспомогательный текст (например «Выберите страну» или «Выберите любимую команду»), необходимо указать его в атрибуте data-placeholder элемента <select>. При этом, в случае единичного поиска, первый из вариантов выбора необходимо сделать пустым (это связано с тем, что в браузерах не предусмотрено состояние "ничего не выбрано" и они по умолчанию делают выбранным первый из элементов):

~lt~select data-placeholder="Выберите страну"~gt~
  ~lt~option value=""~gt~~lt~/option~gt~ 
  ~lt~option value="United States"~gt~United States~lt~/option~gt~
  ~lt~option value="United Kingdom"~gt~United Kingdom~lt~/option~gt~
  ...
~lt~/select~gt~

Как вы уже могли заметить, Chosen обладает строкой поиска. Если по введенной туда строке нет подходящих результатов, то будет выведен текст, который можно задать в свойстве no_results_text.

Chosen и события
Если вам нужно обработать событие change в поле выбора, то вы можно делать это так же, как если бы плагин Chosen не был применен к этому полю. Например так:

// установим плагин на элемент с классом someSelect
$('.someSelect').chosen();
// установим обработчик события
$('.someSelect').change(function(){
  // обработка события change
});

Если элементы в оригинальном поле выбора были изменены (добавлены, удалены) после установки Chosen, то чтобы они вступили в силу, необходимо вызвать на элементе <select> событие 'liszt:updated':

$('.someSelect').trigger("liszt:updated");

После этого, поле выбора будет обновлено.

Информация

Размер плагина ~38k (js+css+png)

Официальная страница

Кроссбраузерный (работает во всех современных браузерах)

↓ название :типы значений (значение по умолчанию)

allow_single_deselect:boolean(false)

Определяет, можно ли в поле единичного выбора отменять (удалять) выбранный результат. По умолчанию, этого делать нельзя — можно только менять выбранный результат на другой. Если вы установите allow_single_deselect в true, необходимо так же, чтобы первый из вариантов выбора был пустой (это связано с тем, что в браузерах не предусмотрено состояние "ничего не выбрано" и они по умолчанию делают выбранным первый из элементов).

// ------- Работа со свойством allow_single_deselect ---------
// в момент установки плагина на элемент
$('select').chosen({allow_single_deselect:true});

disable_search_threshold:integer('0')

Определяет минимальное количество элементов выбора, при котором будет появляться стока поиска (речь идет о поле единичного выбора, при множественном выборе, роль строки поиска играет само поле).

// ------- Работа со свойством disable_search_threshold ---------
// в момент установки плагина на элемент
$('select').chosen({disable_search_threshold:10});

search_contains:boolean('false')

Когда это свойство выключено, поиск элементов происходит по совпадению с началом элементов выбора. Если же это свойство включено, поиск происходит по совпадению в любой части элементов.

// ------- Работа со свойством search_contains ---------
// в момент установки плагина на элемент
$('select').chosen({search_contains:true});

max_selected_options:integer(Infinity)

Это свойство определяет максимальное количество элементов, которые могут быть выбраны при множественном выборе. По умолчанию, количество выбираемых элементов не ограничено.

// ------- Работа со свойством max_selected_options ---------
// в момент установки плагина на элемент
$('select').chosen({max_selected_options:5});

Chosen

Chosen

Подключение

Использование

Информация

Функции по категориям

Навигация