Выпадающее меню jQuery multiselect

У меня есть простой раскрывающийся список html multi select:

<select id="transactionType" multiple="multiple" size="10">
  <option value="ALLOC">ALLOC</option>
  <option value="LOAD1">LOAD1</option>
  <option value="LOAD2">LOAD2</option>
  <!-- etcetera... -->
</select>

Я хочу продолжать использовать этот список в случае, если javascript отключен, но с javaScript я хотел бы отобразить список в виде раскрывающегося списка с несколькими выборами. То есть он показывает только один элемент в списке до щелчка, а затем будет расширяться, чтобы отображать элементы x и обеспечивать прокрутку, где я могу выбрать несколько элементов, как вы ожидали бы, удерживая shift или ctrl.

Новый jQuery искал http://jquery.com/, но пока не нашел, что мне нужно.

Изменить пользователей Struts2, выбранный ответ будет кодироваться с помощью [], это вызывает проблемы в struts2, однако это очень просто. Просто откройте jquery.multiSelect.js и найдите "[]" и удалите один экземпляр, который используется в конкатенации строк. Я также использую jQuery 1.4.4, а не 1.3.2, который поставляется вместе с ним, и все работает отлично.

Ответы

Ответ 1

jQuery MultiSelect - это тот, который я использовал успешно. Вы можете увидеть demo, чтобы определить, что вы ищете.

Ответ 2

Обновление (2017): Следующие две библиотеки стали наиболее распространенными раскрывающимися библиотеками, используемыми в Javascript. Хотя они являются jQuery-native, они были настроены для работы со всем, начиная от AngularJS 1.x и заканчивая созданием пользовательского CSS для Bootstrap. (Избранный JS, оригинальный ответ здесь, по-видимому, упал до 3 по популярности.)

Select2: https://select2.github.io/
Выделить: http://selectize.github.io/selectize.js/

Обязательные скриншоты ниже.

Выбор2:

Selectize:

Оригинальный ответ (2012). Я думаю, что Chosen library также может быть полезна. Его доступно в версиях jQuery, Prototype и MooTools.

Прилагается скриншот о том, как выглядит функция выбора нескольких избранных.

Ответ 3

Я также искал простой мульти-выбор для моей компании. Я хотел что-то простое, настраиваемое и без больших зависимостей, кроме jQuery.

Я не нашел подходящих для меня потребностей, поэтому решил написать свой собственный. Я использую его в производстве.

Вот несколько демонстраций и документации: loudev.com

Если вы хотите внести свой вклад, проверьте репозиторий github

Ответ 4

Загрузите jquery.multiselect
Включите файлы jquery.multiselect.js и jquery.multiselect.css

<script src="jquery-ui-multiselect-widget-master/src/jquery.multiselect.js" type="text/javascript"></script> <link rel="stylesheet" href="jquery-ui-multiselect-widget-master/jquery.multiselect.css" />
Заполните свой выбранный вход
Добавьте мультиселекцию

$('#' + Field).multiselect({ checkAllText: "Your text for CheckAll", uncheckAllText: "Your text for UncheckCheckAll", noneSelectedText: "Your text for NoOptionHasBeenSelected", selectedText: "You selected # of #" //The multiselect knows to display the second # as the total });
Вы можете изменить стиль

ui-multiselect { //The button background:#fff !important; //background-color wouldn't work here text-align: right !important; } ui-multiselect-header { //The CheckAll/ UncheckAll line) background: lightgray !important; text-align: right !important; } ui-multiselect-menu { //The options text-align: right !important; }
Если вы хотите повторно заполнить выбор, вы должны обновить его:

$('#' + Field).multiselect('refresh');
Чтобы получить выбранные значения (разделенные запятыми):

var SelectedOptions = $('#' + Field).multiselect("getChecked").map(function () { return this.value; }).get();
Чтобы очистить все выбранные значения:

$('#' + Field).multiselect("uncheckAll");

Ответ 5

Взгляните на эйишинды dropdown multiselect с огромным количеством настроек и настроек.

Ответ 6

Вы можете использовать selected.i скачать весь файл по этой ссылке Выбранная ссылка для скачивания

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="prism.css" rel="stylesheet" type="text/css" />
    <link href="chosen.css" rel="stylesheet" type="text/css" />
    <script src="jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="chosen.jquery.js" type="text/javascript"></script>
    <script src="prism.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".chzn-select").chosen();
        });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

<ion-view view-title="Profile">
<ion-content class="padding">

<div>
    <label class="item item-input">
        <div class="input-label">Enter Your Option</div>
            <select class="chzn-select" multiple="true" name="faculty" style="width:1000px;">
                <option value="Option 2.1">Option 2.1</option>
                <option value="Option 2.2">Option 2.2</option>
                <option value="Option 2.3">Option 2.3</option>
            </select>   
    </label>
</div>
</ion-content>
</ion-view> 
    </div>
    </form>
</body>
</html>

Весь файл во всех папках

Ответ 7

Вы можете взломать свои собственные, не полагаясь на плагины jQuery... хотя вам нужно будет отслеживать внешние (в JS) выбранные элементы, поскольку переход удалит выбранную информацию о состоянии:

<head>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script>
  <script type='text/javascript'>
    $(window).load(function(){
      $('#transactionType').focusin(function(){
        $('#transactionType').attr('multiple', true);
      });
      $('#transactionType').focusout(function(){
        $('#transactionType').attr('multiple', false);
      });
    });>  
  </script>
</head>
<body>
  <select id="transactionType">
    <option value="ALLOC">ALLOC</option>
    <option value="LOAD1">LOAD1</option>
    <option value="LOAD2">LOAD2</option>
  </select>  
</body>

Ответ 8

Вы хотите сделать что-то вроде этого http://jsfiddle.net/robert/xhHkG/

$('#transactionType').attr({
    'multiple': true,
    'size' : 10
});

Поместите это в $(function() {...}) или какой-нибудь другой onload

Изменить

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

Ответ 9

<select id="mycontrolId" multiple="multiple">
   <option value="1" >one</option>
   <option value="2" >two</option>
   <option value="3">three</option>
   <option value="4">four</option>
</select>

var data = "1,3,4"; var dataarray = data.split(",");

$("#mycontrolId").val(dataarray);

Ответ 10

Я использовал jQuery MultiSelect для реализации выпадающего меню с несколькими значениями с помощью флажка. Вы можете увидеть руководство по реализации отсюда - Мультивыбор раскрывающегося списка с флажком

Реализация очень проста, нужно использовать только следующий код.

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});