При выборе значения select изменить значения у всех select-ах на странице (клонирования выбранных значений)

281

29 июля 2017, 03:47

Здравствуйте. На странице присутствует 3 select. При выборе значения в первом нужно чтобы то же значение отразилось во всех других. Аналогично если в первом ничего не выбрано, а выбрано во втором (третьем), то значения меняется также у всех. Например, если в первом выбрали text1, то во втором и третьем отображается text1, если во втором выбрали text2, то в первом и третьем отображается text2... думаю вы поймете что я имею в виду

Клонирования двух select делаю так:

<select id="one" onchange="document.getElementById('two').value=value">
    <option>Select option</option>
    <option >text1</option>
    <option>text2</option>
    <option>text3</option>
</select>
<select id="two" onchange="document.getElementById('one').value=value">
    <option>Select option</option>
    <option>text1</option>
    <option >text2</option>
    <option>text3</option>
</select>

Пробовал сделать подобно через getElementByClassName для 3-x select-ов но ничего не получилось.

Думаю это не трудно сделать, но к сожалению я не знаю js. Заранее спасибо за Ваш ответ

Answer 1

<div class="container">
<select id="one">
    <option>Select option</option>
    <option >text1</option>
    <option>text2</option>
    <option>text3</option>
</select>
<select id="two" >
    <option>Select option</option>
    <option>text1</option>
    <option >text2</option>
    <option>text3</option>
</select>
<select id="three" >
    <option>Select option</option>
    <option>text1</option>
    <option >text2</option>
    <option>text3</option>
</select>
</div>

Array.prototype.map.call(document.querySelectorAll('select'),function(element,index,arr){
    element.addEventListener('change',function(){   
        var _value = this.value;
      Array.prototype.map.call(arr,function(e,i,a){
                a[i].value = _value;
            })
    },false)
})

рабочий пример https://jsfiddle.net/3t0z7qo3/ ( не завязан на хардкодное количество селектов)

Answer 2

function change(vart) { 
  var one = document.getElementById('one'); 
  var two = document.getElementById('two'); 
  var three = document.getElementById('three'); 
  var curr = vart.value; 
  one.value = curr; 
  two.value = curr; 
  three.value = curr; 
   
  return false; 
}

<select id="one" onchange="change(this);"> 
    <option value="0">Select option</option> 
    <option value="1">text1</option> 
    <option value="2">text2</option> 
    <option value="3">text3</option> 
</select> 
<select id="two" onchange="change(this);"> 
    <option value="0">Select option</option> 
    <option value="1">text1</option> 
    <option value="2">text2</option> 
    <option value="3">text3</option> 
</select> 
<select id="three" onchange="change(this);"> 
    <option value="0">Select option</option> 
    <option value="1">text1</option> 
    <option value="2">text2</option> 
    <option value="3">text3</option> 
</select>

Answer 3

<html>
<head>
<script>
function clone(event)
{
      //заполнил массив элементами, грубовато, да
    var el = [document.getElementById('one'),
            document.getElementById('two'),
            document.getElementById('three')];
    el.forEach(function(item, i, el) {
        if (event.target != item)
            {
                item.value = event.target.value;
            }
    });
}
</script>
</head>
<body>
<select id="one" onChange="clone(event)">
    <option>Select option</option>
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
</select>
<select id="two" onChange="clone(event)">
    <option>Select option</option>
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
</select>
<select id="three" onChange="clone(event)">
    <option>Select option</option>
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
</select>
</body>
</html>