it-swarm.com.ru

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

У меня есть простой 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, выбранный ответ будет кодировать URL с помощью [], что вызывает проблемы в Struts2, но исправить это очень легко. Просто откройте jquery.multiSelect.js, найдите "[]" и удалите один экземпляр, который используется в конкатенации строк. Я также использую jQuery 1.4.4 в отличие от 1.3.2, которая поставляется в комплекте с ним, и все работает просто отлично.

50
Quaternion

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

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

Выберите 2: Select2

Селектизировать: Selectize


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

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

Chosen library

79
Suman

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

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

Вот некоторые демонстрации и документация: loudev.com

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

15
lou
  • Скачать 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");

9
Oranit Dar

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

3
sergejsvit

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

Вы можете взломать свой собственный, не полагаясь на плагины 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
nmz787
<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);
1
wasay raza

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

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

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

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

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

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

Правка

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

0
Robert