Несколько select'ов с уникальными значениями

266

17 января 2018, 16:04

Есть форма с несколькими 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>

Срабатывает только в первый раз. Хотя, по присваиваемым значениям и ключам в консоль пишет все верно.

Answer 1

$(document).ready(function() { 
  var oldV; 
  $('.dropdown-toggle').focus(function() { 
    oldV = $(this).val(); 
    $('#currentSel').val(oldV); 
  }); 
 
  $('.dropdown-toggle').change(function() { 
    var newV = $(this).val();   
    $('.dropdown-toggle').not(this).each(function(){ 
      if ($(this).val() == newV) 
        $(this).val(oldV); 
    }); 
    $(this).blur(); // Без этого не будет вызова focus() 
  }); 
});

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

Answer 2

$(document).ready(function() { 
  var oldV; 
  $('.dropdown-toggle').focus(function() { 
    oldV = $(this).val(); 
    $('#currentSel').val(oldV); 
  }); 
 
  $('.dropdown-toggle').change(function() { 
    var newV = $(this).val();   
    $('.dropdown-toggle').not(this).each(function(){ 
      if ($(this).val() == newV) 
        $(this).val(oldV); 
    }); 
  }); 
});

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