Select2. Изменение поля при выборе значения.

Задача состоит в следующем: при выборе номера телефона клиента необходимо в другом поле изменять значение.

 

HTML:

<form action="" name="record">
  <select class="form-control select2" name="client-phone" data-placeholder="Телефон" style="width: 100%;" tabindex="-1" aria-hidden="true">
    <option value=""></option>
    <option value="1">+7 (555) 555-5555</option>
    <option value="2">+7 (651) 651-6516</option>
    <option value="3">+7 (516) 565-1651</option>
  </select>
  <p>или ФИО</p>
  <select class="form-control select2" name="client" data-placeholder="ФИО" style="width: 100%;" tabindex="-1" aria-hidden="true">
    <option value=""></option>
    <option value="1">ФИО 1</option>
    <option value="2">ФИО 2</option>
    <option value="3">ФИО 3</option>
  </select>
</form>

 

JS:

$('form[name="record"] [name=client-phone]').on('select2:select', function(evt) {
  selectClient('client', evt.params.data.id);
});

$('form[name="record"] [name=client]').on('select2:select', function(evt) {
  selectClient('client-phone', evt.params.data.id);
});

function selectClient(name, id) {
  $('form[name="record"] [name="' + name + '"]').select2('val', id);
}
$(".select2").select2();

 

 

В функцию selectClient передаем имя поля которое необходимо изменить и id выбранного значения.

Результат:

https://jsfiddle.net/yqhaw8fd/