Javascript-форум - Связанные селекты

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

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

- - Связанные селекты (https://javascript.ru/forum/misc/61575-svyazannye-selekty.html)

Связанные селекты

Есть 2 селекта.

<select id="select1" name="select_1">
<option value="">Осуществите выбор</option>
<option value="2">Пункт 1</option>
<option value="50">Подпункт 1.1</option>
<option value="51">Подпункт 1.2</option>
<option value="3">Пункт 2</option>
<option value="52">Подпункт 2.1</option>
<option value="53"Подпункт 2.2</option>
<option value="4">Пункт 3</option>
<option value="54">Подпункт 3.1</option>
<option value="55">Подпункт 3.2</option>

<select id="select2" name="select_2">
<option value="">Осуществите выбор</option>
<option value="Пункт 1">Пункт 1</option>
<option value="Пункт 2">Пункт 2</option>
<option value="Пункт 3">Пункт 3</option>

Нужно их связать так, чтобы при выборе из второго селекта автоматически выбирался соответствующий пункт первого селекта (в идеале вообще чтобы сразу первый дочерний подпункт выбирал, но не всё сразу...).
Т.е. во втором селекте выбираем "Пункт 1". В результате чего в первом селекте автоматически выбирается "Пункт 1".
В познаниях js не силён. Наверное, ошибка простая...

До какого "творчества" дошёл:

var first = document.getElementById("select1"),
second = document.getElementById("select2");

second.onchange = function() {

 var number = second.selectedIndex,
 name = second.options[number].value;

 for (var i = 0; i < first.length; i++){
   if (first.options[i].text == name){
      first.options[i].selected = true;
   } 
 }
};

Скрипт спотыкается на цикле. Не происходит перебора значений.
Спасибо за внимание.

Sapta,

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<select id="select1" name="select_1">
<option value="">Осуществите выбор</option>
<option value="2">Пункт 1</option>
<option value="50">Подпункт 1.1</option>
<option value="51">Подпункт 1.2</option>
<option value="3">Пункт 2</option>
<option value="52">Подпункт 2.1</option>
<option value="53">Подпункт 2.2</option>
<option value="4">Пункт 3</option>
<option value="54">Подпункт 3.1</option>
<option value="55">Подпункт 3.2</option>
</select>

<select id="select2" name="select_2" onchange="same()">
<option value="">Осуществите выбор</option>
<option value="Пункт 1">Пункт 1</option>
<option value="Пункт 2">Пункт 2</option>
<option value="Пункт 3">Пункт 3</option>
</select>
<div id="ggg"></div>
</body>
</html>
<script>
 	function same(){ 
 		var choosen = event.target.value;	
 		if (choosen == "Пункт 1"){
 			$('#select1').val(2);
 		} else if (choosen == "Пункт 2"){
 			$('#select1').val(3);
 		} else if (choosen == "Пункт 3"){
 			$('#select1').val(4);
		}
	}
</script>

Sapta,
проще select_1 создавать согласно выбору в select_2

AciDWarrioR, спасибо. Возможен ли вариант без перебора через if? По аналогии с тем, какой пример я привёл. Т.к. в оригинале позиций в селектах много.

Цитата:

Сообщение от рони (Сообщение 409129)

Sapta,
проще select_1 создавать согласно выбору в select_2

В текущих условиях не подходит, т.к. исходные селекты менять никак не следует.

Sapta,
Так можно выбрать любой. Вот как вариант я думаю можно было бы сделать так, но придется value переделать в первом селекте:

<!DOCTYPE html>
<html lang="en">
<head>
	<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<select id="select1" name="select_1">
<option value="">Осуществите выбор</option>
<option value="Пункт 1">Пункт 1</option>
<option value="50">Подпункт 1.1</option>
<option value="51">Подпункт 1.2</option>
<option value="Пункт 2">Пункт 2</option>
<option value="52">Подпункт 2.1</option>
<option value="53">Подпункт 2.2</option>
<option value="Пункт 3">Пункт 3</option>
<option value="54">Подпункт 3.1</option>
<option value="55">Подпункт 3.2</option>
</select>

<select id="select2" name="select_2" onchange="same()">
<option value="">Осуществите выбор</option>
<option value="Пункт 1">Пункт 1</option>
<option value="Пункт 2">Пункт 2</option>
<option value="Пункт 3">Пункт 3</option>
</select>
<div id="ggg"></div>
</body>
</html>
<script>
 	function same(){ 
 		var choosen = event.target.value;	
 		$('#select1').val(choosen);
	}
</script>

Sapta,
а какой смысл держать все option в select_1 если нужны только 2

Цитата:

Сообщение от AciDWarrioR (Сообщение 409212)

Sapta,
Так можно выбрать любой. Вот как вариант я думаю можно было бы сделать так, но придется value переделать в первом селекте...

В том-то и дело, что менять исходные селекты нельзя.

Цитата:

Сообщение от рони (Сообщение 409213)

Sapta,
а какой смысл держать все option в select_1 если нужны только 2

Например, обычные пользователи имеют доступ только к select2. При выборе Пункта 1 в select1 автоматически произведётся выбор Пункта 1 (а лучше сразу Подпункта 1.1). А вот уже модератор имеет доступ к select1 и может сам назначить Подпункт 1.2 для конкретного случая.

Цитата:

Сообщение от Sapta (Сообщение 409210)

В текущих условиях не подходит, т.к. исходные селекты менять никак не следует.

<script>
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelector('#select2').addEventListener('change', function () {
            var val = this.value, sel1 = document.querySelector('#select1'),
                pattern = new RegExp(val);
            [].some.call(sel1, function (el, i) {
                if (pattern.test(el.innerHTML)) {
                    sel1.selectedIndex = i;
                    return true;
                }
            })
        })
    })
</script>
    <select id="select1" name="select_1">
        <option value="">Осуществите выбор</option>
        <option value="2">Пункт 1</option>
        <option value="50">Подпункт 1.1</option>
        <option value="51">Подпункт 1.2</option>
        <option value="3">Пункт 2</option>
        <option value="52">Подпункт 2.1</option>
        <option value="53">Подпункт 2.2</option>
        <option value="4">Пункт 3</option>
        <option value="54">Подпункт 3.1</option>
        <option value="55">Подпункт 3.2</option>
    </select>

        <select id="select2" name="select_2">
            <option value="">Осуществите выбор</option>
            <option value="Пункт 1">Пункт 1</option>
            <option value="Пункт 2">Пункт 2</option>
            <option value="Пункт 3">Пункт 3</option>
        </select>

Sapta,
спасибо, ну раз вам так нужно ... но хоть десять подпунктов ... нафига остальные Подпункт 2.1 и прочие если выбран Пункт 1

Спасибо за качественные советы!
Проблема также заключалась в моей ошибке, возникшей в работе с данными изначальных селектов.