change all select array name values in form except current select via jquery

Question

I have n select array like this:

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

user can choose all select as 'BOTTOM'

But I want user only can choose one 'TOP'

for example, If choose 'TOP',all of other select be 'BOTTOM'

I try write it via 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'

}

Looks like you are just trying to reinvent radio buttons purpose... And to answer your question: $(".form-control").not(this).val(2) — A. Wolff
– A. Wolff, Commented May 14, 2016 at 13:40

Jayesh Chitroda · Accepted Answer · 2016-05-14 13:41:42Z

1

Try this:

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

answered May 14, 2016 at 13:41

Jayesh Chitroda

5,03915 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

elize Over a year ago

with a little change: $(".form-control).val('2').prop('selected', true); thanks

Mohamed-Yousef · Accepted Answer · 2016-05-14 13:55:11Z

you need to loop through lists by using .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>

Collectives™ on Stack Overflow

change all select array name values in form except current select via jquery

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related