Есть форма с несколькими select. Набор option у всех одинаковый. Требуется сделать так, чтобы при выборе option одного select, другой select с таким же option:selected менялся на тот, который был в первом select до изменения. Сейчас это выглядит так:
$(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>
Срабатывает только в первый раз. Хотя, по присваиваемым значениям и ключам в консоль пишет все верно.