如何将下拉选择框的选中值同步更新到span标签文本中？

你的代码失效的核心原因是select标签的id属性写错了——原代码里id="lastcontactmethod>"多了一个多余的>符号，导致jQuery选择器$('#lastcontactmethod')找不到对应的元素，自然无法绑定change事件实现同步更新。

修正后的完整代码 #

HTML部分

<select name="lastcontactmethod" id="lastcontactmethod" class="text-input">
  <option value="none" selected disabled hidden>How...</option>
  <optgroup label="Voice Call">
    <option value="Voice Call">Voice Call</option>
    <option value="WhatsApp Call">WhatsApp Call</option>
    <option value="Facebook Messenger Call">Facebook Messenger Call</option>
  </optgroup>
  <optgroup label="Text Message">
    <option value="SMS Message">SMS Message</option>
    <option value="WhatsApp Message">WhatsApp</option>
    <option value="Facebook Message">Facebook Messenger</option>
    <option value="Snapchat Message">Snapchat</option>
    <option value="Instagram">Instagram</option>
    <option value="TikTok Message">TikTok</option>
  </optgroup>
  <optgroup label="Other">
    <option value="Letter / Note">Letter / Note</option>
  </optgroup>
</select>

<span id="lastcontactmethod-display" class="item-display"></span>

JavaScript部分

// 绑定下拉框change事件，同步选中值到span
$('#lastcontactmethod').change(function() {
  var selectedValue = $(this).val();
  $("#lastcontactmethod-display").text(selectedValue);
});

// 可选：页面加载完成后自动触发一次change，显示初始选中内容
$(document).ready(function() {
  $('#lastcontactmethod').trigger('change');
});

额外说明 #

1. 去掉select的id里多余的>后，jQuery能正确定位到元素，change事件即可正常触发
2. 用text()代替html()更安全，因为我们只是展示纯文本，不需要解析HTML标签
3. 初始化时触发change事件的代码是可选的，如果不需要页面加载就显示默认值，可以删掉这部分

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