Содержимое option по клику на select
Есть n select-ов с одинаковым списком из к примеру 20 пунктов. Когда я выбираю в одном из списков какой-либо пункт - он должен исчезнуть из всех других select-ов.
Если бы это было к примеру div-ами, то я реализую через $('#div' + i).hide(); Так как мы кликнули на i-й пункт. Но проблема в том, что select-ов много (к примеру 200), и все их обновлять долго и глупо. Я хочу при выборе одного инпута hide-ить его из единого списка, а при клике на следующий select загружать в option только ввидимые пункты. Есть ли более изящное решение? Перетаскивание и один селект не подходит к решению конкретной задачи, я вижу это пока только модальным окном с видимым списком, хотелось бы сделать с помощью select. Вопрос 1. Как в js можно сделать hide конкретного option? Вопрос 2. Можно ли при клике на option Выбрать подгрузить список видимых пунктов в select? :help: |
Ответ на вопрос 1
<select> <option >---</option> <option value="1">Пункт 1</option> <option value="2">Пункт 2</option> <option value="3">Пункт 3</option> </select> <select> <option >---</option> <option value="1">Пункт 1</option> <option value="2">Пункт 2</option> <option value="3">Пункт 3</option> </select> <select> <option >---</option> <option value="1">Пункт 1</option> <option value="2">Пункт 2</option> <option value="3">Пункт 3</option> </select> <script> var sel = document.getElementsByTagName('select'); for(var i = 0;i < sel.length; i++) { sel[i].onchange = function(e) { if(e.target.value == "---") { var opt=document.getElementsByTagName('option'); for(var j = 0;j < opt.length; j++) { opt[j].removeAttribute("hidden"); } } else { for(var j = 0;j < sel.length; j++) { if(e.target != sel[j]) { sel[j].querySelector('option[value="' + e.target.value + '"]').setAttribute("hidden", "hidden"); } } } } } </script> Вопрос 2 не осилил |
Цитата:
<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' /> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <script src='http://code.jquery.com/jquery-latest.js'></script> <script src="https://code.angularjs.org/1.3.9/angular.min.js"></script> <script src="https://code.angularjs.org/1.3.9/angular-route.js"></script> --> <style type='text/css'> </style> <script type='text/javascript'> $(function(){ $('select').eq(0).change(function(){ var o=$(this).next().find('option'); o.show().eq(this.selectedIndex).hide(); }); }); </script> </head> <body> <select> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> <select> <option></option> <option>1</option> <option>2</option> <option>3</option> </select> </body> </html> |
Цитата:
|
Ну единый список с видимыми option у нас есть, как его подгрузить в селект при клике?
|
wwonder,
Цитата:
Поэтому вопрос решается снятием hidden - смотри пост 2 опция --- Можно выполнять для конкретного кликнутого селекта |
Часовой пояс GMT +3, время: 03:01. |