Блог

Главная - Вопросы по программированию - Выберите страну, затем автоматически отобразите код страны при следующем вводе

Выберите страну, затем автоматически отобразите код страны при следующем вводе

#php #jquery #ajax #country-codes #mobile-country-code

Вопрос:

Я пытаюсь добавить национальность и номер телефона человека. Поэтому у меня есть выпадающее меню с названиями стран для национальности и поле ввода для ввода номера телефона. Когда человек выбирает национальность (страну), следующий входной телефон должен автоматически отображать код страны. Поэтому я должен сохранить национальность человека, а также номер телефона в базе данных.

         <div class="form-group">
        <label>Nationality</label>

        <select name="country">
        <option value="">Country...</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        .
        .
        ETC till
        <option value="Zimbabwe">Zimbabwe</option>
        </select>
       </div>

        <div class="form-group">
        <label for="phone">Phone Number</label><
        <input id="phone" name="phone" placeholder="user's number " required="" type="number">
       </div>

Нужно ли мне хранить их в таблице базы данных и извлекать или есть простой способ сделать это?

Ответ №1:

Вы можете добавить в свой тег опции некоторые данные и использовать их с помощью jquery:

 <option value="Zimbabwe" data-countrycode=" 888">Zimbabwe</option>

и jQuery:

 <script>
$( "select[name=country]" ).change(function() {
    $('input#phone').val($('option:selected', this).data('countrycode'));
});
</script>

Ответ №2:

У вас может быть значение=» nnn», или у вас может быть один объект, из которого вы создаете раскрывающийся список, или вы можете получить значение ajax из серверной части. Много — много способов освежевать этого кота. Однозначного ответа нет

Здесь я добавляю атрибут данных для опции и могу использовать значение или и то, и другое

 $("#areaCode").on("change", function() {
  $('#dialCode').val($('option:selected', this).data('dialcode'));
}); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="areaCode">
  <option value="" data-dialcode="">Please select</option>
  <option value="Austria" data-dialcode=" 43">Austria</option>
  <option value="Zimbabwe" data-dialcode=" 263">Zimbabwe</option>
</select>

<input type="text" id="dialCode"/>
Метки: ,