选择下拉列表值后输入框显示HTML代码片段，无法正常展示内容

嘿，这个问题我熟得很！很多人刚开始做自定义下拉框的时候都会踩这个坑——本质上就是你在给input赋值的时候，不小心把下拉选项的HTML代码片段塞进去了，而不是咱们要的纯文本或者选项值。咱们一步步来解决：

通常出现这种情况，是因为你在处理下拉选项的点击事件时，错误地将整个元素的HTML结构赋值给了input，而没有提取选项里的纯文本或者指定的value属性值。

1. 原生JavaScript处理方案 #

先假设你的HTML结构大概是这样的：

<input type="text" id="myInput">
<button id="dropdownBtn">▼</button>
<ul id="dropdownList">
  <li data-value="option1">选项1</li>
  <li data-value="option2">选项2</li>
</ul>

那你需要修改点击事件的处理逻辑，确保提取的是文本或者自定义的data-value：

// 获取核心元素
const input = document.getElementById('myInput');
const dropdownItems = document.querySelectorAll('#dropdownList li');

// 给每个选项绑定点击事件
dropdownItems.forEach(item => {
  item.addEventListener('click', () => {
    // 方案一：提取选项的纯文本（注意去掉多余空格）
    input.value = item.textContent.trim();
    
    // 方案二：如果选项有自定义的data-value属性，用这个更可靠
    // input.value = item.dataset.value;
    
    // 记得点击后收起下拉框（按需添加）
    document.getElementById('dropdownList').style.display = 'none';
  });
});

重点提醒：绝对不要用item.innerHTML赋值！这就是你看到<input type="text"...这类代码的直接原因——它会把元素里的所有HTML结构都塞到input里。

2. jQuery处理方案（如果项目用了jQuery） #

写法会更简洁，逻辑和原生JS一致：

$('#dropdownList li').on('click', function() {
  // 提取纯文本赋值给input
  $('#myInput').val($(this).text().trim());
  // 或者用自定义属性值
  // $('#myInput').val($(this).data('value'));
  $('#dropdownList').hide();
});

3. 框架场景（Vue/React为例） #

如果是Vue项目，要确保绑定的变量和事件传递的是正确的值，而不是元素本身：

<template>
  <div>
    <input v-model="inputValue" type="text">
    <button @click="showDropdown = !showDropdown">▼</button>
    <ul v-if="showDropdown">
      <li v-for="item in options" @click="selectItem(item)">{{ item.text }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      showDropdown: false,
      options: [
        { text: '选项1', value: 'opt1' },
        { text: '选项2', value: 'opt2' }
      ]
    };
  },
  methods: {
    selectItem(item) {
      this.inputValue = item.text; // 也可以用item.value，看需求
      this.showDropdown = false;
    }
  }
};
</script>

React项目同理，在onClick事件里把选项的文本/value设置到input对应的state中，不要传递元素对象。

• 永远避免用innerHTML给input的value赋值，这会引入HTML代码；
• 优先用textContent（原生JS）或.text()（jQuery）获取纯文本；
• 如果选项有明确的value属性或自定义属性（比如data-value），优先用这些属性值，比文本更稳定，尤其适用于选项文本包含特殊字符的场景。

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