选择国家然后在下次输入时自动显示国家代码答案

【问题标题】：Select country then automatically show country code on next input选择国家然后在下次输入时自动显示国家代码
【发布时间】：2021-06-30 17:37:54
【问题描述】：

我正在尝试添加一个人的国籍和电话号码。所以我有一个带有国家名称的下拉列表和一个用于输入电话号码的输入框。当一个人选择国籍（国家）时，下一个输入电话应该自动显示国家代码。所以我必须在数据库中存储这个人的国籍和电话号码。

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

我是否需要将它们存储在数据库表中并进行检索，还是有一种简单的方法可以做到这一点？

【问题讨论】：

标签： php jquery ajax country-codes mobile-country-code

【解决方案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】：

您可以使用 value="+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"/>

【讨论】：