如何取消select选择框首个选项的默认选中 实现用户手动选择后才展示内容

问题核心原因 #

你的代码有两个逻辑问题导致默认会生成不需要的内容：

• JS代码末尾主动执行了一次update()，页面刚加载就会触发内容插入
• update()函数没有做选项校验，即便是顶部的禁用提示选项被选中，也会执行内容插入逻辑

具体修改方法 #

1. JavaScript代码修改

直接替换成以下代码即可：

function update() {
  var select = document.getElementById('tags');
  // 新增判断：选中的不是第一个提示项才执行后续逻辑
  if(select.selectedIndex !== 0) {
    var option = select.options[select.selectedIndex];
    // 修正原计数逻辑错误：原代码没有匹配的.tags类元素，改为统计已有标签数量
    var ttl_text = document.querySelectorAll("#text li").length + 1;
    document.getElementById("text").innerHTML += "<li class='list-inline-item' id='tag" + ttl_text + "'><span class='badge badge-dark'>" + option.text + "<button class='fa fa-times-circle text-white' style='margin-left: 5px;' onclick=remove_tag('tag" + ttl_text + "');></button></span></li>";
  }
}

// 注意删除原来代码末尾的 update(); 这行，不要保留

function remove_tag(id) {
  document.getElementById(id).remove();
  // 原逻辑只是清空内容，改为直接删除元素避免残留空标签
}

2. HTML代码无需修改

你当前设置的<option selected="true" disabled="disabled">*Select That Applies</option>逻辑是正确的，既可以作为默认占位提示，用户选择其他选项后也无法再选回这个占位项，符合需求。

实现效果 #

修改后页面加载不会自动生成任何标签，只有用户主动选择下拉框里的具体职业选项，才会生成对应可删除的标签。

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