Изменять содержание <SELECT> в зависимости от значения введенного в <INPUT>
Доброго времени суток!
Есть небольшая задачка: Суть формы в том, чтобы добавлять в базу новые автомобили, но что бы не вводить марки авто я решил вставить <SELECT> + к существующему <INPUT>. Суть сводится к тому что в <SELECT> уже есть какое то количество марок автомобиля, хочу что бы при заполнении <INPUT> значения из <SELECT> удалялись не соответствующие содержанию <INPUT>. <input name="marks"> <select size="6" id="marks_s"> <option disabled>Выберете марку</option> ... <option value="BMW">BMW</option> <option value="AUDI">AUDI</option> ... </select> Желательно на чистом Java! Не хочу пока в jquery залезать. Заранее всем спасибо! |
Цитата:
Ну а вообще первое что пришло на ум:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<input name="marks" id="inp">
<select size="6" id="marks_s">
<option disabled>Выберете марку</option>
<option value="BMW">BMW</option>
<option value="AUDI">AUDI</option>
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="SUBARU">SUBARU</option>
</select>
<script>
var options = document.querySelectorAll('#marks_s>option');
document.getElementById('inp').oninput = function() {
var select = document.getElementById('marks_s');
var regExp = new RegExp(this.value, 'i');
for(var i = 0; i < options.length; i++) {
if (!regExp.exec(options[i].value)) {
if ( select.contains(options[i]) ) select.removeChild(options[i]);
} else {
select.appendChild(options[i]);
}
}
}
</script>
</body>
</html>
|
Спасибо огромное за мобильный ответ!!! То что нужно!
|
Вот бы еще здорово с пояснением))
|
Чего там пояснять то? Сохраняются option в переменной и при событии input циклом сравниваются их value с регуляркой, созданной на основе значения в инпуте и в зависимости от результата добавляются или убираются из селекта.
|
| Часовой пояс GMT +3, время: 17:20. |