Question

我有三个选择选项下拉菜单，其中包含“电影”类，但是这些值是链接的，所以我必须选择all来获得结果。就我而言，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 each（）方法。但是如何检查是否选择了任何选择选项，并在没有选择选项的情况下使用“---”值从此类中选择其他选项。以下代码无法正常运行。

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

Answer 1

尝试此操作：从所有选择框中移除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 2

＆＃13;

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

＆＃13;

<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>

＆＃13;

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());
     });
 });
});

Jquery自动选择同一类的选项

3 个答案: