如何从intl-tel-input jQuery插件获取选中国家名称

步骤1：修正HTML输入框的错误 #

你的模板里#country输入框有两处拼写错误，先修正：

• type="code"改为type="text"（存储国家名称用文本类型更合适）
• vale=" "改为value=""（属性名拼写错误）

修正后的HTML片段：

<div class="col-md-6 col-lg-6 mg-t-20 mg-md-t-0">
         <input type="text" id="country" value="">
         <label class="form-control-label">Telephone: <span class="tx-danger">*</span></label> <input class="form-control" type="tel" id="mobile-number" name='phone_number' placeholder="e.g. +1 702 123 4567">  
</div>

步骤2：修改JS代码添加国家切换监听 #

在初始化intlTelInput时，添加countrychange事件监听，通过插件内置方法获取选中国家的名称，再写入目标输入框。

修改后的inttelephoneinput.js代码：

$(function() {
    // 初始化插件
    const input = $("#mobile-number").intlTelInput({
        preferredCountries: ["us", "co"],
    });

    // 监听国家切换事件，实时更新国家名称
    input.on("countrychange", function() {
        const countryData = input.intlTelInput("getSelectedCountryData");
        $("#country").val(countryData.name);
    });

    // 页面加载完成后，设置默认选中的国家名称
    const initialCountryData = input.intlTelInput("getSelectedCountryData");
    $("#country").val(initialCountryData.name);
});

代码说明 #

• countrychange事件：用户切换国家选择器时自动触发
• getSelectedCountryData()：返回当前选中国家的信息对象，其中name字段就是完整的国家名称
• 初始化时额外设置一次默认值，确保页面加载后#country输入框直接显示默认选中的国家名称

内容的提问来源于stack exchange，提问作者andrxj