如何更改兩個具有相同ID的選擇中的選項？

Question

我有我的網頁，並且由於對選擇的數量來設計我需要加倍在他們每兩個選擇方案。

這裏是我的HTML看起來像

<div class=""> 
    <div class="form-group"> 
    <label for="first">Dummy text 1</label> 
    <select id="first"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
</div> 
<div class=""> 
    <div class="form-group"> 
    <select id="first"> 
     <option>Dummy text 1</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
    </select> 
    </div> 
</div> 
<div class=""> 
    <div class="form-group"> 
    <label for="second">Dummy text 2</label> 
    <select id="second"> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
    </select> 
    </div> 
</div> 
<div class=""> 
    <div class="form-group"> 
    <select id="second"> 
     <option>Dummy text 2</option> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
    </select> 
    </div> 
</div> 

這裏是例子https://jsfiddle.net/tmg0705o/5/

是什麼，如果它在另一個選擇是改變ID爲改變一個選項ID爲「第一」選擇正確的方法「第一」？同一ID爲「第二」等是否有任何方式寫一個代碼，所有這些選擇，並每次都突出的ID？

Answer 1

試試這個通用的解決方案：jsfiddle.net/bharatsing/tmg0705o/7/

• 你需要給同選擇-組中選擇元素，這是相同的，需要改變。
• 還需要給映射類所有選擇的元素。因此，結合點擊事件
• 當選擇元素值改變會觸發與同一其他選擇元素改變事件代碼和選擇值選擇組。

$(".mapped").change(function(){ 
 
    var _value=$(this).val(); 
 
    var select_group=$(this).attr("select-group"); 
 
    $('select[select-group="'+select_group+'"]').not(this).val(_value); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class=""> 
 
    <div class="form-group"> 
 
    <label for="first">Dummy text 1</label> 
 
    <select id="first" class="mapped" select-group="first"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class=""> 
 
    <div class="form-group"> 
 
    <select id="first" class="mapped" select-group="first"> 
 
     <option>Dummy text 1</option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class=""> 
 
    <div class="form-group"> 
 
    <label for="second">Dummy text 2</label> 
 
    <select id="second" class="mapped" select-group="second"> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
     <option>5</option> 
 
    </select> 
 
    </div> 
 
</div> 
 
<div class=""> 
 
    <div class="form-group"> 
 
    <select id="second" class="mapped" select-group="second"> 
 
     <option>Dummy text 2</option> 
 
     <option>1</option> 
 
     <option>2</option> 
 
     <option>3</option> 
 
     <option>4</option> 
 
    </select> 
 
    </div> 
 
</div>