变化形式，除了目前的所有选择数组名值通过jQuery

Question

选择我有N个选择数组是这样的：

<select class="form-control" name="upporder['1']"> 
<option value="1">TOP</option> 
<option value="2" selected>BOTTOM</option> 
</select> 

<select class="form-control" name="upporder['2']"> 
<option value="1">TOP</option> 
<option value="2" selected>BOTTOM</option> 
</select> 
. 
. 
. 
<select class="form-control" name="upporder['n']"> 
<option value="1">TOP</option> 
<option value="2" selected>BOTTOM</option> 
</select> 

用户可以选择全部选择为“底部”

但我希望用户不仅可以选择一个“顶”

例如，如果选择“顶”，所有的其他选择是“底”

我尝试通过jQuery写：

$("[name=upporder]").on('change',(function(e) { 
    e.preventDefault(); 

    if(this.val() == 2) 
     // do not do anything 
    elseif(this.val() == 1) 
     //change all other 'select' value (with same name) to '2' except current 'select' 

} 

Answer 1

试试这个：

$(".form-control").change(function(){ // handle click event of all selectbox 
    if($(this).val() == '1') { // check if TOP is selected 
     $(".form-control").val('2'); // first set all select box value to 2 
     $(this).val('1'); // set current selectbox to 1 
    } 
}); 

Answer 2

您通过列出需要循环使用.each()

$("select.form-control").on('change',function(e) { 
 
    e.preventDefault(); 
 

 
    if($(this).val() == '2'){ 
 
     // do not do anything 
 
    }else if($(this).val() == '1'){ 
 
    //change all other 'select' value (with same name) to '2' except current 'select' 
 
    $("select.form-control").not($(this)).each(function(){ 
 
    $(this).find('option[value="2"]').prop('selected', true); 
 
    }); 
 

 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select class="form-control" name="upporder['1']"> 
 
<option value="1">TOP</option> 
 
<option value="2" selected>BOTTOM</option> 
 
</select> 
 

 
<select class="form-control" name="upporder['2']"> 
 
<option value="1">TOP</option> 
 
<option value="2" selected>BOTTOM</option> 
 
</select> 
 
<select class="form-control" name="upporder['n']"> 
 
<option value="1">TOP</option> 
 
<option value="2" selected>BOTTOM</option> 
 
</select>