下拉列表ID选择后隐藏关联名称仅保留ID的实现咨询

哈哈，这个需求我之前做项目的时候刚好碰到过！要实现「选的时候能看到ID+对应客户/场地名称（不用死记ID），选完之后只保留ID显示」，其实不用纠结原生组件的限制，给你两个靠谱的实现思路：

这种方式完全由你掌控显示逻辑，完美贴合需求：

• 用一个容器div当下拉触发器，初始就显示当前选中的ID（或者提示语）
• 点击触发器时，展开一个自定义的选项列表，每个选项里同时展示ID和对应的名称，比如101 - 环球贸易中心
• 选中选项后做三件事：
  1. 把触发器的显示内容改成选中的纯ID
  2. 收起选项列表
  3. 将实际要提交给后端的隐藏字段值设为这个ID

给你一段伪代码参考：

<!-- 用来显示ID的触发器 -->
<div class="dropdown-trigger" onclick="toggleDropdown()">
  <span id="show-text">请选择ID</span>
</div>
<!-- 自定义的选项列表 -->
<ul class="dropdown-options" style="display: none;">
  <li data-id="101" onclick="pickOption(this)">101 - 环球贸易中心</li>
  <li data-id="102" onclick="pickOption(this)">102 - 某某科技客户</li>
</ul>
<!-- 实际提交给后端的隐藏字段 -->
<input type="hidden" id="target-id" name="customer_id">

<script>
function toggleDropdown() {
  document.querySelector('.dropdown-options').style.display = 'block';
}
function pickOption(el) {
  const selectedId = el.dataset.id;
  // 更新显示为纯ID
  document.getElementById('show-text').textContent = selectedId;
  // 设置提交用的字段值
  document.getElementById('target-id').value = selectedId;
  // 收起选项列表
  document.querySelector('.dropdown-options').style.display = 'none';
}
</script>

如果不想完全自定义组件，也可以用原生select搭配额外的显示元素来实现：

• 原生select的option文本设为ID - 名称，但value属性只放纯ID
• 页面上放一个span（或者只读输入框）用来显示最终的ID，初始显示提示语或默认ID
• 给select绑定change事件：用户选完选项后，把span的内容替换成select的value（也就是纯ID），然后把select隐藏起来

伪代码示例：

<!-- 显示用的span，点击它触发select显示 -->
<span id="display-id" onclick="document.getElementById('id-select').style.display='block'">请选择ID</span>
<!-- 原生select，平时隐藏 -->
<select id="id-select" style="display: none;" onchange="updateShow(this)">
  <option value="101">101 - 环球贸易中心</option>
  <option value="102">102 - 某某科技客户</option>
</select>

<script>
function updateShow(selectEl) {
  document.getElementById('display-id').textContent = selectEl.value;
  selectEl.style.display = 'none';
}
</script>

小提醒 #

不管用哪种方案，核心都是把「用户交互时的提示信息」和「实际提交的业务数据」分开——显示层给用户看友好的ID+名称，提交层只传纯ID就行。如果是Vue/React这类框架项目，直接用组件库的Select组件（比如Element UI、Ant Design）就能轻松实现，只需要自定义选项模板和选中后的显示模板~

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