Как получить value 1 элемента option в списке select?
Добрый день. Есть список select из динамически заполняющимися элементами option. К этому списку добавлен поиск, путем получения массива элементов, его фильтрации и возврата нового массива, который удовлетворяем условиям. Все хорошо, но есть одно НО, если в списке остается 1 элемент подскажите как получить его value?
Т.е если в поиске ввести "ха" в списке будет только Харьков, вот тут нужно получить его value чтоб на основе этого подгрузить улицы города. Буду очень благодарен за помощь:thanks: https://codepen.io/Copermaine/pen/dyzQOEN?editors=1011
<input autofocus type="text" id="select_filter" placeholder="Введи текст для поиска" />
<select name="select" id="select_region" class="geo_select">
<option value="" hidden>Оберіть регіон</option>
<option value="1" >Харьков</option>
<option value="2" >Хмельницк</option>
<option value="3" >Хмарцизк</option>
</select>
const regionSelect = document.getElementById('select_region');
const regionFilter = document.getElementById('select_filter');
const optionsArray = [...regionSelect.options];
regionFilter.oninput = function(e) {
const val = this.value.trim();
const regexp = new RegExp(val, "ig");
regionSelect.options.length = 0;
optionsArray.forEach(elem =>{
if (elem.innerText.search(regexp) !== -1){
regionSelect.appendChild(elem);
}
})
};
|
regionSelect.options[0].value
|
Цитата:
|
А в какой момент надо получать
Можно проверять, что он 1 при вводе букв. (Кстати, если случайно ввести не букву, а, например [ вместо х, то будет ошибка в регулярном выражении) Если при щелчке по селекту, то можно на click. regionSelect.options[regionSelect.selectedIndex].value |
Вложений: 1
Давайте расскажу что в целом должно быть, а вы мне возможно подскажите какой-то другой вариант решения.
Мне нужно реализовать поиск пока по городам, но далее он также будет и по улицам. Есть массив городов которые принадлежат области, и есть улицы принадлежащие конкретному городу. Улиц у города будет много, и скролить не вариант, поэтому решили добавить поиск. Исходя из этого я выбрал конструкцию select-option так как она дает возможность каждому option присвоить текст и value, по которому отрисовывается следующая ступень, я создаю option и заполняю его данными из масcиива при помощи js далее заполняю этими option select в HTML ну и вижу список на страничке. Вот при поиске для того чтоб мне отрисовать следующую ступень принадлежности, нужно получить value выбранного элемента, а в моей реализации я его получить не могу))) Т.е мне нужно значение получить когда я кликаю по option если он один отобразился в select. |
Какой то натянутый интерфейс.
Если вам нужен только тогда, когда 1, то зачем кликать? Это лишнее действие. Просто при поиске проверяйте количество найденных и берите его, если остался только один. Да и зачем тогда селект. Просто в списке искать и показывать, когда один остался. А почему только один? Допустим осталось в селекте 3 или 5 или 10, и человек видит то, что ему нужно, почему он не может кликнуть по нужному и не вводить дальше. В любом случае событие 'click' даст нужный элемент
<body>
<input autofocus type="text" id="select_filter" placeholder="Введи текст для поиска" />
<select name="select" id="select_region" class="geo_select">
<option value="" hidden>Оберіть регіон</option>
<option value="1" >Харьков</option>
<option value="2" >Хмельницк</option>
<option value="3" >Хмарцизк</option>
</select>
<script>
const regionSelect = document.getElementById('select_region');
const regionFilter = document.getElementById('select_filter');
const optionsArray = [...regionSelect.options];
regionFilter.oninput = function(e) {
const val = this.value.trim();
const regexp = new RegExp(val, "ig");
regionSelect.options.length = 0;
optionsArray.forEach(elem =>{
if (elem.innerText.search(regexp) !== -1){
regionSelect.appendChild(elem);
}
})
};
regionSelect.addEventListener('click', () => {
console.log (regionSelect.options[regionSelect.selectedIndex].value)
})
</script>
</body>
|
Можно еще рассмотреть использование элемента <datalist>
|
Если в селекте остается больше 1 оптиона, то ту без проблем срабатывает onchange, а когда один нет изменения, onchange не работает.
Событие по клику работает, но не полностью, предположил пользователь в инпут ввел 'хар' а дальше кликать по селекту не хочет. <datalist> пробую. |
Цитата:
Это вы должны продумать должен ли пользователь кликать, если остался только один элемент. |
| Часовой пояс GMT +3, время: 15:25. |