2015-07-14 2 views
3

Я использую Select2 (v4) в нескольких вариантах формы и с трудом получая раскрывающийся список функций, которые мне нужны. У меня closeOnSelect установлен на false, поэтому пользователь может легко добавить несколько значений. То, что я вижу на тестовом сайте, - это то, что во всех браузерах, кроме iOS, при нажатии за пределами области раскрывающегося списка всплывающее окно закрывается (что является желаемым поведением). На iOS единственный способ закрыть его - щелкнуть внутри входа.Select2 dropdown не закрывается по щелчку

Как ни странно, при попытке повторить через jsfiddle, я могу получить только 4 версии выбор2 вести себя так, как я вижу его на прошивке - http://jsfiddle.net/8g27t277/

У меня есть другой jsfiddle с помощью Select2 v3.4.6, который показывает защелкивающийся к тесной функциональности я хочу во всех браузерах - http://jsfiddle.net/0tefq3yz/

Тест HTML:

<select id="options" size="9"> 
    <option value="357">One</option> 
    <option value="358">Two</option> 
    <option value="359">Three</option> 
    <option value="360">Four</option> 
    <option value="361">Five</option> 
</select> 

Тестовые ЯШ:

$('#options').select2({ 
    "placeholder": "Pick multiple options", 
    "multiple": true, 
    "closeOnSelect": false 
}); 

Что вызывает выпадающий список (или нет) в ответ на события щелчка вне входа?

+0

При нажатии на входе ниспадающего на самом деле единственное, что делает причиной его закрыть, так что я не уверен, я понимаю, что вы говорите. Можете ли вы уточнить? – nicolekanderson

+0

просмотрите мой комментарий по ссылке https://stackoverflow.com/a/46251972/2134005 –

ответ

1

У меня такая же проблема, через некоторое время я узнал, что нажатие на страницу html не будет выполнять эту работу. Выбрать 2 раскрывающегося списка будет работать только внутри тега тела. Если у вас есть целая страница (целая страница, покрытая тегом body), а затем щелкните любой, где будет закрываться выпадающий список.

here is updated JSFiddle

***HTML*** 
<body class='bodyClass'> 
    <div class='mainClass'> 
<select id="options" size="9"> 
    <option value="357">One</option> 
    <option value="358">Two</option> 
    <option value="359">Three</option> 
    <option value="360">Four</option> 
    <option value="361">Five</option> 
</select> 

***CSS*** 
select { 
width: 300px; 
} 
.bodyClass{ 
    width:100%; 
    height:500px; 
} 

***JS*** 

$('#options').select2({ 
"placeholder": "Pick multiple options", 
    "multiple": true 
}); 
1

Я нашел такое же решение, как Venkata Sandeep, если ваш body -элементное не на всю высоту, и вы только нажать на html -элемента на вашей странице, то раскрывающийся список не будет закрыт.

я решил его с помощью изменения размеров тела:

// CSS for the body element 
body { 
    min-height: 100vh; 
    width: 100%; // probably you won't need the width. 
} 
Смежные вопросы