Форум

ksa · #11 (**permalink**) 18.07.2011, 18:35

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

Мне нужно чтобы в зависимости от value выбранной страны, в поле <select name='region' id='region' оставались только те <option> у которых id равен value выбранной страны

Поганая твоя собака (с)

ИД должен быть уникальным на страничке... Для "группировки" элементов используй например класс.

MaxD · #12 (**permalink**) 18.07.2011, 18:42

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

Поганая твоя собака (с)

ИД должен быть уникальным на страничке... Для "группировки" элементов используй например класс.

Ок, буду использовать класс от этого не многое меняется!)))
Как тогда поступить?!

monolithed · #13 (**permalink**) 18.07.2011, 18:46

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('[name="form"] select').change(function() {                     
        $(this).next('select').removeAttr('disabled').find('option').eq(this.selectedIndex-1).show(1, function() {
            $(this).attr('selected', '');
        }).siblings().hide();
    });
});
</script>

<form name="form">
    <select>
        <option value="0" selected="">-- выберите --</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
    </select>
    <select disabled="">
        <option value="1">Челябинск</option>
        <option value="2">Севастополь</option>
    </select>
</form>

kobezzza · #14 (**permalink**) 18.07.2011, 18:48

window.onload = function () {
	document.getElementById("country").onchange = function () {
		var
			group = document.getElementById("region").childNodes,
			$val = this.value, i, name;
		
		for (i = group.length; i--;) {
			if (group[i].nodeType !== 1) { continue; }
			
			name = group[i].getAttribute("name");
			
			if (name === $val || $val === "-1") {
				group[i].style.display = "";
			} else { group[i].style.display = "none"; }
		}
	};
};

<select size="1" name="country" id="country">
	<option value="-1" selected="">Выберите страну</option>
	<option value="0">Другая</option>
	<option value="1">Россия</option>
	<option value="2">Литва</option>
</select>

<select size="1" name="region" id="region">
	<option value="-1" selected="">Выберите регион</option>
	<option value="0">Другой</option>
	<option name="1" value="1">Калининград</option>
	<option name="2" value="3">Сувалкия</option>
	<option name="2" value="4">Жемайтия</option>
	<option name="1" value="5">Нижегородская </option>
	<option name="1" value="6">Воронежская</option>
</select>

MaxD · #15 (**permalink**) 18.07.2011, 18:54

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function() {
    $('[name="form"] select').change(function() {                     
        $(this).next('select').removeAttr('disabled').find('option').eq(this.selectedIndex-1).show(1, function() {
            $(this).attr('selected', '');
        }).siblings().hide();
    });
});
</script>

<form name="form">
    <select>
        <option value="0" selected="">-- выберите --</option>
        <option value="1">Россия</option>
        <option value="2">Украина</option>
    </select>
    <select disabled="">
        <option value="1">Челябинск</option>
        <option value="2">Севастополь</option>
    </select>
</form>

Можешь пожалуйста поэтапно расписать проделаные тобой действия, а то я некоторые элементы впервые вижу!

MaxD · #16 (**permalink**) 18.07.2011, 19:00

kobezzza написал что-то похожее только хотелось бы, чтобы все при помощи JQuery было сделано, а не на класическом javascript!

ksa · #17 (**permalink**) 18.07.2011, 19:01

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

Как тогда поступить?

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

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script>
function Go(Typ) {
	var os=document.getElementById('region')
	var o=os.options
	var i
	for (i=o.length-1; i>-1; i--) {
		if (o[i].className!=Typ) {
			os.removeChild(o[i])
		}
	}
}
</script>
</head>
<body>
<body>
<select size="1" name="country" id="country" onchange='Go(this.value)'>
	<option value="-1" selected>Выберите страну</option>
	<option value="0">Другая</option>
	<option value="1">Россия</option>
	<option value="2">Литва</option>
</select>
<label for='region'>Регион:</label>
<select size="1" name="region" id="region">
	<option value="-1" selected>Выберите регион</option>
	<option value="0">Другой</option>
	<option class="2" value="2"></option>
	<option class="1" value="1">Калининград</option>
	<option class="2" value="3">Сувалкия</option>
	<option class="2" value="4">Жемайтия</option>
	<option class="1" value="5">Нижегородская </option>
	<option class="1" value="6">Воронежская</option>
</select>
</body>
</html>

MaxD · #18 (**permalink**) 18.07.2011, 19:06

Зачем усложнять себе жизнь циклами javascript, JQuery же делает все на автомате, нужно просто задать параметры, вот в этом вся трудность!

kobezzza · #19 (**permalink**) 18.07.2011, 19:07

Хочеш жиквери?) Держи:

$(function(){
	$("#country").change(function () {
		var $val = $(this).val();
		
		if ($val === "-1") {
			$("#region > option").show();
		} else { $("#region > option[name!='" + $val + "']").hide().siblings("option[name='" + $val + "']").show(); }
	});
});

monolithed · #20 (**permalink**) 18.07.2011, 19:12

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

Можешь пожалуйста поэтапно расписать проделаные тобой действия, а то я некоторые элементы впервые вижу!

какие конкретно? все тут есть

ksa, что-то бредом попахивает))
1. у option есть нативный метод remove()
2. className откуда?

Форум

Справочник

Discord чат

Курсы javascript