Jquery自動選擇相同類別的選擇選項

Question

我有三個選擇選項下拉菜單，類爲'電影'，但這些值是鏈接的，所以我必須全部選擇以獲得結果。在我的情況下，HTML代碼如下所示：

<select name="sc30" id="sc30" onchange="autoSelect()" class="film"> 
    <option>Choose an option...</option> 
    <option>---</option> 
    <option>White</option> 
    <option>Black</option> 
</select> 

<select name="ij10" id="ij10" onchange="autoSelect()" class="film"> 
    <option>Choose an option...</option> 
    <option>---</option> 
    <option>Red</option> 
    <option>Green</option> 
    <option>Gold</option> 
</select> 

<select name="sc100" id="sc100" onchange="autoSelect()" class="film"> 
    <option>Choose an option...</option> 
    <option>---</option> 
    <option>Gold glossy</option> 
    <option>Silver glossy</option> 
</select> 

如果我選擇ID =「SC30」白選擇其他兩個選擇選項必須走價值「---」。或者，如果我從ID =「SC100」選擇選項黃金光澤從這個類「膜」其他選項一定要把這個值---

我認爲我必須使用jQuery的每（） 方法。但是如何檢查是否選擇了選項，並且在沒有選擇選項的情況下使用「---」值從該類別中選擇其他選項。下面的代碼無法正常工作。

function autoSelect() { 
    $('.dummy').each(function(index, value){ 
     if($(this).val() != '---') { 
      $(".dummy").val($(".dummy option:eq(1)").val()); 
     } 
    }); 
} 

Answer 1

$(function() { 
 
    $('select.film').on('change', function() { 
 
    var cb = $(this); 
 
    if (2 === cb.prop('selectedIndex')) { 
 
     $('select.film').not(cb).prop('selectedIndex', 1); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select name="sc30" id="sc30" class="film"> 
 
    <option>Choose an option...</option> 
 
    <option>---</option> 
 
    <option>White</option> 
 
    <option>Black</option> 
 
</select> 
 

 
<select name="ij10" id="ij10" class="film"> 
 
    <option>Choose an option...</option> 
 
    <option>---</option> 
 
    <option>Red</option> 
 
    <option>Green</option> 
 
    <option>Gold</option> 
 
</select> 
 

 
<select name="sc100" id="sc100" class="film"> 
 
    <option>Choose an option...</option> 
 
    <option>---</option> 
 
    <option>Gold glossy</option> 
 
    <option>Silver glossy</option> 
 
</select>

Answer 2

嘗試這種情況：從所有選擇框除去onchange="autoSelect()"和如下所示結合change事件，並選擇第二option爲每個選擇框除了當前爲其change事件燒製 -

$(function(){ 
$('.film').change(function(){ 
    //iterate all other select box except current using `not(this)` 
    $('.film').not(this).each(function(){ 
     // get selected option for the current select box 
     var $selected = $(this).find('option:selected'); 
     // if index of selected option is greater than 1, 
     // it means option is selected. 
     if($selected.index()>1)  
      $(this).val($(this).find('option:eq(1)').val()); 
    }); 
}); 
}); 

DEMO

Answer 3

我只是刪除這兩行代碼：

var $selected = $(this).find('option:selected'); 
if($selected.index()>1) 

，並已就行了！

$(function(){ 
$('.film').change(function(){ 
    //iterate all other select box except current using `not(this)` 
    $('.film').not(this).each(function(){ 
     $(this).val($(this).find('option:eq(1)').val()); 
    }); 
}); 
});