Форум

Hammer · #1 (**permalink**) 10.03.2013, 18:20

Привет всем, надеюсь на Вашу помощь.
Имеем допустим три селекта, каждый селект имеет свой id, допустим от 1 до 3. В каждом селекте имеем 6 опций, например цифры от 0 до 5.
Задача состоит в том чтобы при выборе в 1 селекте допустим цифру 3, она должна стать недоступной в остальных двух. Далее выбирая в 3 селекте цифру 2, она так же в остальных должна стать недоступной. Если же мы в 1 селекте возвращаем цифру 0, которая по умолчанию выбрана(selected), то цифра 3 должна стать доступной во всех селектах снова. Добавлю так же что селекты генерируются динамически через php и соответсвенно изначально количество селектов неизвестно, потому как их количество зависит от количества записей в БД.
Знаю что надо с функцией onchange, однако сам не осилю, поскольку в javascript не разбираюсь достаточно. Находил кучу описаний как связывать селекты, но там чаще односторонняя связь. Знаю что есть вариант генерации самих селектов при помощи javascript, поэтому обратился к Вам уважаемые гуру.

<FORM ACTION='/index.php' METHOD='POST'>
<select id="mySelectId[1]" name="numer[1]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[2]" name="numer[2]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[3]" name="numer[3]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>

ksa · #2 (**permalink**) 10.03.2013, 19:28

Сообщение от Hammer

при выборе в 1 селекте допустим цифру 3, она должна стать недоступной в остальных двух. Далее выбирая в 3 селекте цифру 2, она так же в остальных должна стать недоступной. Если же мы в 1 селекте возвращаем цифру 0, которая по умолчанию выбрана(selected), то цифра 3 должна стать доступной во всех селектах снова.

Как вариант...

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
</style>
<script type="text/javascript">
$(document).ready(function (){
	$('select').change(function (){
		var o=$(this);
		if (this.value!=0) {
			$('option[value="'+this.value+'"]').attr({
				disabled: 'true'
			});
		};
		$('option[value="'+o.data('val')+'"]').removeAttr('disabled');
		o.data('val',this.value);
	});
});
</script>
</head>
<body>
<FORM>
	<select id="mySelectId[1]" name="numer[1]" data-val='0'>
		<option value='0'>0</option>
		<option value='1'>1</option>
		<option value='2'>2</option>
		<option value='3'>3</option>
		<option value='4'>4</option>
		<option value='5'>5</option>
	</select>
	<br />
	<select id="mySelectId[2]" name="numer[2]" data-val='0'>
		<option value='0'>0</option>
		<option value='1'>1</option>
		<option value='2'>2</option>
		<option value='3'>3</option>
		<option value='4'>4</option>
		<option value='5'>5</option>
	</select>
	<br />
	<select id="mySelectId[3]" name="numer[3]" data-val='0'>
		<option value='0'>0</option>
		<option value='1'>1</option>
		<option value='2'>2</option>
		<option value='3'>3</option>
		<option value='4'>4</option>
		<option value='5'>5</option>
	</select>
</form>
</body>
</html>

Hammer · #3 (**permalink**) 10.03.2013, 20:00

Спасибо огромное. Хороший пример. Но видать я неверно объяснил задачу, надо было наверное написать, не просто недоступен, а исчезает из списка, знаю что такое возможно и видел? Если же муторно такое написать, то воспользуюсь Вашим примером. Почему нужно что-бы исчезали цифры, потому что в каждом селекте по 99 цифр и таких селектом может быть до 40 штук. Пользователю будет не совсем удобно, если по прежнему придётся пролистывать весь список селекта. Спасибо заранее за помощь.

danik.js · #4 (**permalink**) 10.03.2013, 20:01

В общем без jQuery довольно жестко получается )

<form action='/index.php' method='POST'>
<select id="mySelectId[1]" name="numer[1]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[2]" name="numer[2]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
<br>
<select id="mySelectId[3]" name="numer[3]">
<option value='0' selected>0</option>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
</select>
</form>
<script>
(function(){
    var selects = [];
    for (var i = 0; i < 3; i++) {
        var select = document.getElementById('mySelectId['+(i+1)+']');
        select.onchange = (function(i) {
            return function() {selectHandler.call(this, i)}
        })(i);
        selects[i] = {
            element: select,
            value: select.value
        }
    }
    function toggleOption(select, map) {
        for (var i = 0, option; option = select[i]; i++) {
            if (option.value in map) {
                option.style.display = (map[option.value] ? '' : 'none');
            }
        }
    }
    function selectHandler(index) {
        var optionMap = {};
        optionMap[selects[index].value] = 1;
        if (this.value != 0) {
            optionMap[this.value] = 0;
        }
        for (var i = 0, select; select = selects[i]; i++) {
            if (this != select.element) {
                toggleOption(select.element, optionMap);
            }

        }
        selects[index].value = this.value;
    }
})();
</script>

Hammer · #5 (**permalink**) 10.03.2013, 20:22

danik.js извините но Ваш пример работает точно так же как и пример от ksa, как я писал выше нужно чтобы опции(цифры) исчезали и появлялись обратно. Но всё равно огромное спасибо за Ваши примеры.

danik.js · #6 (**permalink**) 10.03.2013, 20:40

Изменил скрипт. Если селектов много, то возможно вариант с jQuery будет шустрее работать, так как использует выборку по селектору, а не итерацию по всем опшнам.

Hammer · #7 (**permalink**) 10.03.2013, 20:45

О Вы гений!

Форум

Справочник

Discord чат

Курсы javascript