Как использовать select2.js

Я хочу добавить поле формы, которое может автоматически заполнять текст и может иметь несколько вкладок (аналогично fb). Я обнаружил, что select2.js помогает мне это сделать, но у меня возникают проблемы с его использованием, когда я устанавливаю для нескольких атрибутов значение true. если я добавлю несколько: true, страница отображает это как обычный выбор.

Я нахожу документацию на странице select2 запутанной.

Я новичок во всех них, пожалуйста, помогите мне.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>          
<script type="text/javascript" src="select2.js"></script>          

 <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { 
        $("#e1").select2([multiple: true]);
        });
    </script>

</head>
<body>
<input type="button" id="123">click
</br>
<input type="hidden" id="1234">
<select id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>

        <option value="WY">Wyoming</option>
    </select>

</body>
</html>

html jquery jquery-select2 jquery-chosen
person petarap    schedule 28.01.2013    source источник
comment
вот пример руководства youtu.be/gTNQOxvuUv0   -  person Shailesh Ladumor    schedule 28.02.2021

Ответы (3)


arrow_upward
25
arrow_downward

Добавьте атрибут «несколько», и ширину тоже, только в разметке.

<select multiple id="e1" style="width:300px">

и js как это:

$(document).ready(function() { 
 $("#e1").select2();
});

См. скрипку здесь: http://jsfiddle.net/marcusasplund/jEADR/2/

Дополнительное примечание; вы загружаете select2.js 2 раза в коде, указанном в вашем вопросе.

person MarcusAsplund    schedule 29.01.2013
comment
Это сработало для меня на CakePHP. Потратил вечность, пытаясь понять, какую магию они сотворили с git select2 ... Спасибо. - person iexiak; 28.02.2013
comment
@mattblang Вы правы, может быть, бит только в разметке был немного запутанным. Возможно, было бы лучше указать ширину в css. Возможно, поскольку вам нужно установить ширину контейнера, созданного select2, следующим образом: .select2-container-multi { width: 300px } Затем, если вообще не указать ширину целевого элемента select, элемент select2 будет начинаться только с отступом 2 * 5px и 0px ширина = 10 пикселей. И, возможно, это немного мало для хорошего UX. Обновленная скрипта здесь: ссылка - person MarcusAsplund; 13.02.2014
comment
Установите атрибут selected для параметра, который вы хотите использовать в качестве начального значения: <option value="Am" selected>Amalapuram</option> См. fiddle здесь: http://jsfiddle.net/jEADR/326/ - person MarcusAsplund; 01.03.2014

arrow_upward
1
arrow_downward

Вы можете переопределить класс, специфичный для select2.js:

.select2-container-multi .select2-choices {
    width: 150px;
}

Он должен работать.

person Kanan Farzali    schedule 01.11.2013

arrow_upward
1
arrow_downward

Вы можете использовать несколько атрибутов с выбором

 <html>
  <head>
    <link href="select2.min.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery.js"></script>      
    <script type="text/javascript" src="select2.min.js"></script>     
 </head>
 <body>
    <select multiple id="getCountry">
      <option value="India">India</option>
      <option value="Afghanistan">Afghanistan</option>
      <option value="japan">japan</option>
    </select>
    <input type="button" id="submit" value="Submit">click
    <script>
      $(document).ready(function() {   
        $("#getCountry").select2();   
      });      
    </script>   
  </body>
</html>
person Ravi Patel    schedule 28.09.2017