How do I handle multiple selects in jQuery?

I have written a piece of code that synchronizes two select dropdowns. If I choose value one in one select then the same value gets selected in the other select.

https://jsfiddle.net/lupocatttivo/q9tpLxw8/

However, what I would like to do is the exact opposite. If I choose value one in select 1, then in select 2 it should choose value 2. And vice versa.

could anyone please help?

thanks
badwolfffAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

RobOwner (Aidellio)Commented:
I had to add values to your options to make it work: https://jsfiddle.net/q9tpLxw8/1/

<select id="selectOne" class="selectBoxGroup">
    <option value="false">Value One</option>
    <option value="true">Value Two</option>
</select>

<select id="selectTwo" class="selectBoxGroup">
    <option value="true">Value One</option>
    <option value="false">Value Two</option>
</select>

Open in new window


$(document).ready( function() {
    
    $(document).on('change', '.selectBoxGroup', function() {
        $('.selectBoxGroup').val($(this).val());
    });
    
});

Open in new window

0
badwolfffAuthor Commented:
Hi,

thanks for the answer. I already knew this method but the problem is that I can't specify the values beforehand as they are assigned. All I know is that when value 1 of dropdown 1 is chosen, then value 2 of dropdown 2 should become selected. And vice versa. Is it possible without using this trick? All we know is that the number of options per dropdown is always 2.

thanks
0
RobOwner (Aidellio)Commented:
There needs to be a value to compare or you can compare it using the selectedIndex property of the select

Open in new window

0
badwolfffAuthor Commented:
"or you can compare it using the selectedIndex property of the select "

could you please explain with an example?
0
RobOwner (Aidellio)Commented:
You bet :)  It was just 4am and I fell back asleep *grin*

This does assume the selects are next to each other as a sibling.  If this isn't the case, let me know.

$(function() {
  $('body').on('change', 'select', function(e) {
    var newval = (e.target.selectedIndex===0) ? 1 : 0;
    $(this).siblings('select').prop('selectedIndex',newval);
  });
});

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.