Javascript-форум - Как заменить заменить поле в форме и отсортировать строки <option>?

Страница 2 из 5

Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Как заменить заменить поле в форме и отсортировать строки <option>? (https://javascript.ru/forum/misc/18855-kak-zamenit-zamenit-pole-v-forme-i-otsortirovat-stroki-option.html)

ksa	18.07.2011 18:35

Цитата:

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

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

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

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

MaxD	18.07.2011 18:42

Цитата:

Сообщение от ksa (Сообщение 114019)

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

monolithed

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

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	18.07.2011 18:54

Цитата:

Сообщение от monolithed (Сообщение 114025)

<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	18.07.2011 19:00

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

ksa	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.07.2011 19:06

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

kobezzza

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

18.07.2011 19:12

Цитата:

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

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

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

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

Часовой пояс GMT +3, время: 18:32.

Страница 2 из 5

Последняя »

Показывать 40 сообщений этой темы на одной странице