окно выбора onchange - PullRequest
Новая
       5

окно выбора onchange

3 голосов
/ 19 марта 2012

Скажем, у нас есть 2 разных поля выбора с одинаковым количеством опций: 

<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>

<select id="box2">
<option value="3" >3</option>
<option value="4" >4</option>
</select>

Возможно ли, если мы выберем первое поле, чтобы автоматически выбрать один и тот же номер опции во втором поле?Если возможно, без jQuery.

ОБНОВЛЕНИЕ: значения в 2 полях разные!Когда мы выберем первое значение box1, значение box 2 будет автоматически равно 3!и так далее ...

Ответы [ 7 ]

8 голосов
/ 19 марта 2012

Да.Добавьте свойство onChange к первому выбору, а затем используйте его для вызова функции JavaScript, которую вы написали в другом месте. 

<select id="box1" onChange="changeBox2(this.selectedIndex);">
<option value="1" >1</option>
<option value="2" >2</option>
</select>

<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>

W3 Schools JavaScript Events

Пример доступа к свойствам SELECT в JS

2 голосов
/ 19 марта 2012

Будет работать следующий JS: 

document.getElementById("box1").onchange = function(){
    document.getElementById("box2").value = this.value;
};

Не самый элегантный код, который я написал, но дает вам то, что вам нужно.Скрипка: http://jsfiddle.net/XZRKS/

2 голосов
/ 19 марта 2012

Код фрагмента JavaScript: 

var box1=document.getElementById("box1");
box1.onchange=function (){
    document.getElementById("box2").value=box1.value;
}
1 голос
/ 29 октября 2018 

$("#box1").on('change',function(){
  document.getElementById("box2").value = this.value;
  console.log($("#box2").val());
});
$("#box2").on('change',function(){
  document.getElementById("box1").value = this.value;
});
<select id="box1">
<option value="1" >1</option>
<option value="2" >2</option>
</select>

<select id="box2">
<option value="1" >1</option>
<option value="2" >2</option>
</select>
1 голос
/ 19 марта 2012

Надеюсь ниже, что вы хотите ... 

<html>
<body>
<select id="box1" onChange="box2.value=box1.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>

<select id="box2"  onChange="box1.value=box2.value">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
</select>

</body>
</html>
0 голосов
/ 03 февраля 2014 
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
box1.addEventListener("change", function(e){
    var val = parseInt(this.value);
    box2.querySelector("option:nth-child("+val+")").selected = true;
}, false);

Это будет работать только в Gecko / Mozilla
Для IE используйте onChange вместо change и attachEvent вместо addEventListener, для получения дополнительной информации посетите
http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx
для получения информации оquerySelector см. эту ссылку
https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

0 голосов
/ 19 марта 2012

да, это просто в JavaScript. только одна строка. 

function ch(){
  document.getElementById("box2").value = document.getElementById("box1").value ;
}

Вы можете позвонить ch() на onchange событие box2

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...