На этой странице будет 16 раскрывающихся ящиков, когда я выберу элемент из каждого из них, я бы хотел, чтобы он удалялся из всех остальных.
Это для футбольной линейки, если это поможет вам представить сценарий.
Надеюсь, это не слишком расплывчато, и я понимаю, с чем я борюсь.
Благодаря 🙂
Я использую во всем проекте: HTML, PHP, Javascript, AJAX
<select name="pl1"> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select name="pl2"> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select name="pl3"> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select name="pl4"> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> Решение для Javascript:
function check() { d=document; myArray = []; for (h=0;h<4;h++) { myArray[h] = d.getElementById('pl'+(h+1)).value; } for (a=0;a<4;a++) { for (b=1;b<5;b++) { d.getElementById('pl'+(a+1)).options[b].style.display = "block"; for (c=0;c<4;c++) { if(d.getElementById('pl'+(a+1)).options[b].value == myArray[c]) { d.getElementById('pl'+(a+1)).options[b].style.display = "none"; } } } } }
HTML:
<select id="pl1" onchange="check();"> <option value="">Choose</option> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select id="pl2" onchange="check();"> <option value="">Choose</option> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select id="pl3" onchange="check();"> <option value="">Choose</option> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select> <select id="pl4" onchange="check();"> <option value="">Choose</option> <option value="1">Ben</option> <option value="2">Jack</option> <option value="3">James</option> <option value="4">John</option> </select>
Убедитесь, что вы используете идентификатор, а не имя в
Использование jQuery :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function () { var selects = $('select.magic-select'); $(selects).bind('change', function (evt) { var newVal = $(this).val(), oldVal = $(this).data('old-val'); if (newVal != 0) { $(selects).not(this).find('option[value="' + newVal + '"]').attr('disabled', 'disabled'); } $(selects).not(this).find('option[value="' + oldVal + '"]').removeAttr('disabled'); $(this).data('old-val', newVal); }); }); </script> </head> <body> <?php $players = array('Ben', 'Jack', 'James', 'John', 'Foo', 'Bar', 'Allmighty Foobar'); $numPlayers = count($players); for ($i = 1; $i <= $numPlayers; $i += 1) { printf('<select class="magic-select" name="pl%s" size="%s"><option value="0"></option>', $i, $numPlayers + 1); foreach ($players as $j => $name) { printf('<option value="%s">%s</option>', $j + 1, $name); } echo '</select>'; } ?> </body> </html>
Обратите внимание, что magic-select в качестве имени класса не является обязательным. Это может быть что угодно, но вам придется настроить javascript соответственно.
Решение прототипа:
$$('select').each(function(item) { Event.observe(item, 'change', function(e) { var el = e.srcElement; var val = el.options[el.selectedIndex].innerHTML; $$('select').each(function(item) { if (item != el) { for (var i = 0; i < item.options.length; i++) { if (item.options[i].innerHTML == val) { item.removeChild(item.options[i]); } } } }); }); });
Я взял ответ @Tokes и сделал его немного понятным и добавил к нему jQuery для выпадающего списка и выбора опций. Я предоставляю эту возможность, кто-то борется с ее внедрением. Я использую самые прямые селекторы, поэтому jQuery не должен так много работать. Я использую эту логику на 68 выпадающих списках с 68 параметрами в нем, производительность была плохой, когда я начал из-за jQuery и количества циклов, которые я использовал, но теперь это действительно мгновенно, поэтому я надеюсь, что кто-то получит какую-то пользу из Это. Спасибо Токи, ваш ответ помог мне в моей ситуации 🙂
function _updateDropdowns() { // gather selects with class so we dont grab all var select = $('#tbl_fieldMap select.table-fields'); // store used fields var used = []; // collect all selected values for (var x = 0; x < select.length; x++) { // get selects value var val = select[x].value; // dont add empty if (val != '') used[x] = val; } // foreach select box for (var a = 0; a < select.length; a++) { // get options that matter (excludes 'default entry') var options = $(select[a]).children('.table-option'); // foreach option in select for (var c = 0; c < options.length; c++) { // current option var opt = options[c]; if ($.inArray(opt.value, used) > -1) { // hide if already used opt.style.display = "none"; } else { // show if not used opt.style.display = "block"; } } } }
.data () = Хранить произвольные данные, связанные с указанным элементом, и / или вернуть значение, которое было установлено.
.not () = Удалить элементы из набора согласованных элементов.
.on () = присоединяет функцию обработчика события для одного или нескольких событий к выбранным элементам (изменение в этом случае)
.find () = Получает потомки каждого элемента в текущем наборе согласованных элементов, фильтруется селектором, объектом jQuery или элементом. в этом случае хорошо найдите элемент, который был использован и помещен в var с именем prevValue, затем мы проверяем, есть ли совпадение с другими полями выбора, а затем удаляет их из параметров выбора.
$(document).ready(function(){ $('select').on('change', function(event ) { var prevValue = $(this).data('previous'); $('select').not(this).find('option[value="'+prevValue+'"]').show(); var value = $(this).val(); $(this).data('previous',value); $('select').not(this).find('option[value="'+value+'"]').hide(); }); });