如何用JavaScript拼接select与input值并在input中显示完整内容？

看起来你想要实现的是当用户选择不同国家时，自动把对应的区号和输入的电话号码拼接起来，完整显示在tel输入框中。你当前的代码只在页面加载时执行一次，而且如果用户先输入号码再切换国家，会出现重复拼接的问题（比如先输入123，切换国家后变成91123，再切换US又变成191123），显然不符合预期。

下面是两种更完善的实现方案，你可以根据需求选择：

方案1：区号与号码同框显示（支持自动替换区号） #

这种方案让区号和号码在同一个输入框里，切换国家时自动替换开头的区号，同时保留用户输入的号码部分。

完整代码 #

<select id="country">
  <option data-countryCode="IN" value="91">India</option>
  <option data-countryCode="US" value="1">US</option>
  <option data-countryCode="GB" value="44">UK</option>
</select>
<input type="tel" placeholder="956 826 4457" id="tel" value="+91 ">

const select = document.querySelector('#country');
const tel = document.getElementById('tel');

// 核心函数：更新电话号码显示
function updatePhoneNumber() {
  const selectedCode = select.options[select.selectedIndex].value;
  // 提取用户输入的纯号码（移除原有区号部分）
  const purePhoneNumber = tel.value.replace(/^\+?\d+\s?/, '');
  // 拼接新区号和号码，加上+号更符合国际号码规范
  tel.value = `+${selectedCode} ${purePhoneNumber}`;
}

// 页面加载时初始化显示
updatePhoneNumber();

// 监听下拉框切换事件，实时更新
select.addEventListener('change', updatePhoneNumber);

代码说明 #

• updatePhoneNumber函数：负责处理区号替换逻辑，用正则表达式/^\+?\d+\s?/匹配输入框开头的区号部分（支持带+号或不带，后面可能带空格），替换为空后得到用户输入的纯号码，再拼接新的区号。
• 页面加载时调用一次函数，确保初始状态正确；监听下拉框的change事件，每次切换国家自动更新输入框内容。

方案2：区号与号码分离显示（更友好的用户体验） #

如果不想让用户误修改区号，可以把区号单独放在一个只读区域，用户只需要输入号码部分，体验更清晰。

完整代码 #

<div style="display: flex; gap: 8px; align-items: center;">
  <span class="country-code">+91</span>
  <input type="tel" placeholder="956 826 4457" id="tel">
  <select id="country">
    <option data-countryCode="IN" value="91">India</option>
    <option data-countryCode="US" value="1">US</option>
    <option data-countryCode="GB" value="44">UK</option>
  </select>
</div>

const select = document.querySelector('#country');
const countryCodeSpan = document.querySelector('.country-code');
const tel = document.getElementById('tel');

// 更新区号显示
function updateCountryCode() {
  const selectedCode = select.options[select.selectedIndex].value;
  countryCodeSpan.textContent = `+${selectedCode}`;
}

// 初始化+监听切换事件
updateCountryCode();
select.addEventListener('change', updateCountryCode);

代码说明 #

• 把区号放在只读的<span>里，用户只能在输入框中填写号码部分，避免误改区号；切换国家时只更新span里的区号内容即可。
• 如果需要获取完整的号码，只需要拼接countryCodeSpan.textContent和tel.value即可。

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