JQuery множественный выбор выпадающего меню - PullRequest
Новая
       55

JQuery множественный выбор выпадающего меню

50 голосов
/ 21 января 2011

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

<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.

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

Редактировать Пользователи Struts2, выбранный ответ будет URL кодировать с [], это вызывает проблемы в Struts2 исправитьОднако это очень легко.Просто откройте jquery.multiSelect.js, найдите «[]» и удалите один экземпляр, который используется в конкатенации строк.Я также использую jQuery 1.4.4 в отличие от 1.3.2, которая поставляется в комплекте с ним, и все работает просто отлично.

Ответы [ 9 ]

80 голосов
/ 29 февраля 2012

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

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

Выбрать 2: Select2

Выбор: Selectize

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

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

Chosen library

16 голосов
/ 17 августа 2011

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

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

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

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

9 голосов
/ 04 сентября 2014

  • Загрузить 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");

3 голосов
/ 04 апреля 2016

Вы можете использовать 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>

Все файлы в одной папке

3 голосов
/ 21 октября 2011

Взгляните на выпадающий список множественных вариантов erichynds с огромным количеством настроек и настроек.

1 голос
/ 24 мая 2016

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

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

$('#transactionType').multiselect({
    columns: 1,
    placeholder: 'Select Transaction Type'
});
1 голос
/ 07 апреля 2014

Вы можете взломать свой собственный, не полагаясь на плагины 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>
1 голос
/ 07 марта 2014 
<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);
0 голосов
/ 21 января 2011

Вы хотите сделать что-то подобное http://jsfiddle.net/robert/xhHkG/

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

Поместите это в $(function() {...}) или в другую нагрузку

Редактировать

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

...