There is a form with several select. The option set is the same for everyone. It is required to make so that at choice of option one select, another select with the same option: selected changed to the one that was in the first select before the change. Now it looks like this:
$(document).ready(function() { $('.dropdown-toggle').focus(function() { getVal = $(this).val(); $('#currentSel').val(getVal); arr = []; x = 0; $('.dropdown-toggle').each(function() { x++; arr[x] = $(this).val(); }); }); $('.dropdown-toggle').change(function() { if ($.inArray($(this).val(), arr) > -1) { getVal = $('#currentSel').val(); key_unsel = $.inArray($(this).val(), arr); key_sel = $.inArray(getVal, arr); $('select:eq(' + key_sel + ') option:selected[value=' + $('#currentSel').val() + ']').removeAttr('selected'); $('select:eq(' + key_sel + ')').val(getVal); } }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="col-md-3"> <select class="dropdown-toggle"> <option value="email" selected="selected">email</option> <option value="phone">phone</option> <option value="name">name</option> </select> </div> <div class="col-md-3"> <select class="dropdown-toggle"> <option value="email">email</option> <option value="phone" selected="selected">phone</option> <option value="name">name</option> </select> </div> <div class="col-md-3"> <select class="dropdown-toggle"> <option value="email">email</option> <option value="phone">phone</option> <option value="name" selected="selected">name</option> </select> </div> <div class="col-md-3"> <input type="text" id="currentSel"> </div> It works only for the first time. Although, according to the assigned values and keys, the console writes everything correctly.
