如何通过下拉选择国家读取属性值填充电话字段区号？

完全没问题，这个需求很常见，不用修改option的value值也能轻松实现——我们可以用HTML5标准的data-*自定义属性来存储区号，既保留原有value的业务用途，又能便捷地获取区号填充到电话字段里。

步骤1：给下拉选项添加自定义数据属性 #

先修改你的<select>下拉框，给每个国家选项加上data-code属性来存储对应的区号：

<select id="country">
  <option value="Austria" data-code="+43">Austria</option>
  <option value="Switzerland" data-code="+41">Switzerland</option>
  <option value="Germany" data-code="+49">Germany</option>
  <!-- 其他国家选项依次添加 -->
</select>

<input type="tel" id="phone" placeholder="请输入电话号码">

步骤2：编写jQuery监听逻辑 #

接着修改你的JS代码，在下拉框切换时，读取选中选项的data-code值，再填充到电话字段中：

$('#country').change(function () {
  // 获取当前选中的option元素
  const selectedOpt = $(this).find('option:selected');
  // 从自定义data属性中取出区号
  const areaCode = selectedOpt.data('code');
  // 将区号填充到电话输入框（若需保留用户输入可调整逻辑）
  $('#phone').val(areaCode);
});

额外优化提示 #

• 如果你不想用data-*属性，也可以用id属性存储区号，但data-*是官方推荐的自定义属性方案，语义更清晰，还不会和页面其他元素的id冲突。
• 如果需要给用户输入的号码添加前缀（而非直接覆盖），可以调整填充逻辑，同时避免重复添加：

  const currentPhoneVal = $('#phone').val().replace(/^\+\d+\s/, '');
  $('#phone').val(`${areaCode} ${currentPhoneVal}`);
  

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