咨询：Thymeleaf中无需JavaScript将下拉项添加至文本框的方法

先给你直接说结论：完全不用JS的话，没法实现你想要的“点击下拉选项就把标签添加到下方文本框”的交互，更别说复刻StackOverflow的标签系统了。不过别担心，哪怕你JS基础薄弱，用几行极简的JS代码就能搞定核心功能，甚至能做出接近StackOverflow的标签效果，我给你慢慢说：

为什么纯HTML/CSS做不到？ #

原生HTML的<select>组件本身没有“点击选项后自动把内容同步到另一个输入框”的能力，也没法处理标签去重、删除这类动态交互——这些都需要通过JavaScript来监听用户的点击事件，然后修改页面内容。

当然，你可以用<select multiple>做一个多选下拉框，让用户按住Ctrl/Command选多个标签，但这和你想要的“点击就添加到文本框”的体验完全不一样，而且没法把选中项单独展示在文本框里。

适合新手的极简JS方案（核心功能） #

我写了一段超简单的代码，逻辑清晰，你一看就懂，完全不需要复杂的JS知识：

<!-- 下拉选择框 -->
<label for="tag-select">选择标签：</label>
<select id="tag-select">
  <option value="">--选择标签--</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="react">React</option>
</select>

<!-- 展示已选标签的文本框 -->
<p>已选标签：</p>
<input type="text" id="tag-input" readonly placeholder="已选标签会显示在这里">

<script>
// 获取页面上的下拉框和文本框元素
const select = document.getElementById('tag-select');
const input = document.getElementById('tag-input');

// 监听下拉框的选择事件
select.addEventListener('change', function() {
  const selectedTag = this.value;
  if (!selectedTag) return; // 跳过默认的空选项
  
  // 简单去重：如果文本框里还没有这个标签，就添加进去
  if (!input.value.includes(selectedTag)) {
    input.value = input.value ? `${input.value}, ${selectedTag}` : selectedTag;
  }
  
  // 把下拉框重置回默认选项，方便再次选择
  this.value = '';
});
</script>

这段代码的作用很直白：

1. 用户选一个标签，触发change事件
2. 检查这个标签有没有已经在文本框里，没有就加进去
3. 把下拉框复位，方便继续选其他标签

进阶：接近StackOverflow的标签样式（可删除） #

如果你想要更像StackOverflow的标签（每个标签是带删除按钮的小方块），也只需要加一点点CSS和JS，代码依然很简单：

<style>
/* 标签的样式 */
.tag {
  display: inline-block;
  background: #e1ecf4;
  color: #39739d;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 2px;
  cursor: pointer;
  font-size: 14px;
}
.tag:hover {
  background: #c9d8e3;
}
.tag span {
  margin-left: 6px;
  font-weight: bold;
}
</style>

<label for="tag-select">选择标签：</label>
<select id="tag-select">
  <option value="">--选择标签--</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="javascript">JavaScript</option>
  <option value="react">React</option>
</select>

<p>已选标签：</p>
<!-- 用容器代替文本框，用来放标签方块 -->
<div id="tag-container"></div>

<script>
const select = document.getElementById('tag-select');
const container = document.getElementById('tag-container');

select.addEventListener('change', function() {
  const selectedTag = this.value;
  if (!selectedTag) return;
  
  // 去重：检查容器里有没有这个标签
  if (!container.querySelector(`.tag[data-tag="${selectedTag}"]`)) {
    // 创建一个新的标签元素
    const tagElement = document.createElement('span');
    tagElement.className = 'tag';
    tagElement.dataset.tag = selectedTag;
    tagElement.innerHTML = `${selectedTag} <span>&times;</span>`;
    
    // 给标签添加删除功能：点击就删掉自己
    tagElement.addEventListener('click', function() {
      this.remove();
    });
    
    // 把标签加到容器里
    container.appendChild(tagElement);
  }
  
  this.value = '';
});
</script>

这个版本就和StackOverflow的标签体验很像了：选一个标签就出现一个带叉号的小方块，点叉号能删掉，还会自动去重。

总结 #

别害怕用JavaScript，上面的代码都是最基础的DOM操作，每一行的作用都很明确，你甚至可以照着改标签选项、调整样式，完全不需要懂复杂的JS概念。纯HTML/CSS确实做不到你要的交互，但几行极简JS就能轻松实现，而且效果还能接近StackOverflow的标签系统~

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