첫 번째 드롭 다운과 동일한 값으로 두 번째 드롭 다운을 작성하십시오.

Question

동적 인 드롭 다운 수가 있습니다. 첫 번째 드롭 다운에서 값을 선택하면 초의 값이의 첫 번째 드롭 다운과 동일하게됩니다. 그러나 사용자는 초의 값을 변경하는 등의 방법으로을 드롭 다운하지만 첫 번째 및 다른 드롭 다운의 값은 변경하지 않습니다.

는

<select name="dropdown[]"> 
    <option value="1">Sony</option> 
    <option value="2">Nintendo</option> 
    <option value="3">Microsoft</option> 
</select> 

<select name="dropdown[]"> 
    <option value="1">Sony</option> 
    <option value="2">Nintendo</option> 
    <option value="3">Microsoft</option> 
</select> 

<select name="dropdown[]"> 
    <option value="1">Sony</option> 
    <option value="2">Nintendo</option> 
    <option value="3">Microsoft</option> 
</select> 

는

어떻게이 사용 자바 스크립트 또는 JQuery와 라이브러리를 달성 할 수 ?

Answer 1

첫 번째 선택 요소에 리스너를 첨부 할 수 있습니다 :

var selects = document.querySelectorAll('select[name="dropdown[]"]'); 

selects[0].addEventListener('change', function() { 
    for (var i = 0; i < selects.length; i++) { 
    selects[i].value = selects[0].value; 
    } 
}); 

첫 번째 선택 값만 변경되면 다른 선택 값도 업데이트됩니다. 이 방법은 타사 라이브러리에 의존하지 않습니다.

데모 : http://jsfiddle.net/cuefb9ag/

Answer 2

는 change 이벤트를 사용하고 다른 드롭 다운을 변경 :

$("select[name=dropdown\\[\\]]").change(function() { 
    var value = this.value;  
    $("select[name=dropdown\\[\\]]").not(this).val(value); 
}); 

데모 : http://jsfiddle.net/awv14f6r/1/

당신이 순서를 변경하려는 경우는 (첫 번째, 등 변경) - 사용 next과 함께를 this

$(this).next("select").val(value); 

Answer 3

var id = $('#DropDownID1 option:selected').val(); 
var textValue = $('#DropDownID1 option:selected').text(); 
     $('#DropDownID2').prop('selectedIndex', 0); 
     $('#DropDownID2').select2('data', { 
      val: id, 
      text: textValue 
     }); 
     $('#DropDownID2 option:selected').val(id); 
    }