Как с помощью скрипта заменить маску телефона в полe input в зависимости от выбранной страны в поле select

Question

Здравствуйте!

Есть следующая конструкция:

$("#phone_1_field").mask("+7(999) 999-9999");

div {
  margin: 15px 0px;
}

select,
input {
  padding: 10px;
  width: 300px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.min.js" type="text/javascript"></script>
<div class="wrapper">
  <select>
    <option value="">-- Выберите Вашу страну --</option>
    <option value="11">Армения</option>
    <option value="20">Беларусь</option>
    <option value="176">Российская Федерация</option>
    <option value="220">Украина</option>
  </select>
</div>

<div><input placeholder="Телефон" type="text"  id="phone_1_field" class="required"> </div>

Сейчас если кликнуть в поле Телефон #phone_1_field в нем маска телефона для России, начинается на +7, как сделать с помощью скрипта, что если пользователь выбрал например Украину option value="220", то подключалась другая функция с маской телефона начинающейся на +380

Благодарю за ответ!

Answer 1

Получаем value значение с <select> и подставлять его в .mask()

let numchange = $('#number_country'),
    input = $('#phone_1_field');

function ChangeMask(mask) {
  if($.isNumeric(mask)) {// Если получили число, то
      mask = '+'+mask+' (999) 999-9999';
      input.mask(mask); // Создаём маску
      input.attr('placeholder', mask.replace(/9/g, '_')); // Для красоты сделаем ещё и placeholder
    } else {
      input.unmask(); // Если не число то снимаем маску.
      input.attr('placeholder', 'Телефон');
    }
} ChangeMask(numchange.val()); // При первой загрузке выдаём маску

numchange.on('change', function() {
  ChangeMask($(this).val()); // Выдаём маску при изменении кода города
});

div {
  margin: 15px 0px;
}

select,
input {
  padding: 10px;
  width: 300px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.min.js" type="text/javascript"></script>
<div class="wrapper">
  <select id="number_country">
    <option value="">-- Выберите Вашу страну --</option>
    <option value="374">Армения</option>
    <option value="375">Беларусь</option>
    <option value="7" selected>Российская Федерация</option>
    <option value="380">Украина</option>
  </select>
</div>

<div><input placeholder="Телефон" type="text"  id="phone_1_field" class="required"> </div>

Answer 2

var maskMap = {
  11: "+374(999) 999-999",
  20: "+375(99) 999-99-99",
  176: "+7(999) 999-9999",
  220: "+38(999) 999-9999"
}
$("#phone_1_field").mask("+7(999) 999-9999");

$('select').change(function(){
  var phoneMask  = maskMap[this.value];
  $("#phone_1_field").mask(phoneMask);
  $("#phone_1_field").val('').focus();
})

div {
  margin: 15px 0px;
}

select,
input {
  padding: 10px;
  width: 300px;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/src/jquery.maskedinput.min.js" type="text/javascript"></script>
<div class="wrapper">
  <select>
    <option value="">-- Выберите Вашу страну --</option>
    <option value="11">Армения</option>
    <option value="20">Беларусь</option>
    <option value="176">Российская Федерация</option>
    <option value="220">Украина</option>
  </select>
</div>

<div><input placeholder="Телефон" type="text"  id="phone_1_field" class="required"> </div>

БЛОГ НА HUSL

Как с помощью скрипта заменить маску телефона в полe input в зависимости от выбранной страны в поле select

Ответы (2 шт):