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/