Как с помощью JS сделать авто вставку значения в input select?

Question

[ernestby]

Есть два Select Input, в первом и втором есть по два значения: яблоко и груша. По умолчанию в первом стоит яблоко, во втором груша, как сделать так, чтобы при выборе яблоки во втором селекте, в первом селекте значение менялось на грушу?

Answer 1

[Сергей Наломенко]

JavaScript (нужно подключить библиотеку jQuery):

$(function(){
	$("#select2").change(function(){ 
		if($(this).val() == "apple")  $("#select1").val("pear")  
	});
});

HTML:

<select id="select1" >
	<option value="apple" selected >Яблоко</option>
	<option value="pear" >Груша</option>
</select>
<select id="select2" >
	<option value="apple" >Яблоко</option>
	<option value="pear" selected >Груша</option>
</select>

Рабочий пример тут

Comments

[Сергей Наломенко]

keslo: А с чего бы ему не работать? :)

[keslo]

А почему у вас код тут обернут в функцию?
$(function() { ... } );

[Сергей Наломенко]

keslo: Потому-что такая функция выполняется уже после загрузки документа. Если Вы объявляете этот скрипт, например, в секции , то на этом этапе скрипт еще не знает о существовании элементов с айдишниками select1 и select2, и, как следствие, не сможет забиндить листенер .change() на этот элемент.

[keslo]

Сергей Наломенко: Ясно. На JSfiddle просто работает и без обертки в функцию, поэтому и спросил. Спасибо за разъяснение.

[Сергей Наломенко]

keslo: На JSFiddle, если посмотреть на левое меню, стоит опция onLoad, что уже подразумевает выполнение скрипта после загрузки документа, что само по себе является аналогом $(function(){...})

[keslo]

Ага, спасибо.

Answer 2

[Pavel Demyanenko]

Если с jQuery, то на .on('change', function() {
// здесь код для смены значения другого селекта
});

Answer 3

[Златослав Десятников]

Как грустно, когда для таких задач используют jQuery...
Тут набросал пример на нативном JS.