Форум

Sapta · #1 (**permalink**) 24.02.2016, 17:08

Есть 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;
   } 
 }
};

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

AciDWarrioR · #2 (**permalink**) 24.02.2016, 17:39

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>

рони · #3 (**permalink**) 24.02.2016, 18:57

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

Sapta · #4 (**permalink**) 25.02.2016, 09:29

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

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

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

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

AciDWarrioR · #5 (**permalink**) 25.02.2016, 09:34

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>

рони · #6 (**permalink**) 25.02.2016, 09:35

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

Sapta · #7 (**permalink**) 25.02.2016, 09:55

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

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

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

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

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

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

destus · #8 (**permalink**) 25.02.2016, 09:57

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

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

<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>

рони · #9 (**permalink**) 25.02.2016, 10:05

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

Sapta · #10 (**permalink**) 26.02.2016, 08:53

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

Форум

Справочник

Discord чат

Курсы javascript