HTML中Select列表显示异常：值文本出现在选项左侧

这明显是<option>标签的写法出问题啦！大概率是你错误地把本该作为属性的内容写到了标签外面，导致浏览器把value相关的文本当成了普通内容，直接渲染在选项左侧。

你当前的错误写法（推测） #

<label for="title">Title</label>
<select name="title">
  <option value="Select">Choose Title</option>
  Mr.<option value="Mr">Select List Option For Mr</option>
  Mrs.<option value="Mrs">Select List Option For Mrs</option>
</select>

你看，Mr.和Mrs.是写在<option>标签外面的纯文本，浏览器自然会把它们直接显示在对应选项的左边，就出现了你看到的Mr."Select List Option For Mr"这种奇怪效果。

正确的写法示范 #

要把用户看到的选项文本放在<option>标签的内部，value属性只用来存储表单提交时的对应值，比如：

<label for="title">Title</label>
<select name="title" id="title">
  <option value="">Choose Title</option> <!-- 建议默认值设为空，更符合表单规范 -->
  <option value="Mr">Mr.</option>
  <option value="Mrs">Mrs.</option>
  <option value="Ms">Ms.</option>
</select>

如果你的需求是选项要显示完整描述，直接把内容写在标签里就行：

<option value="Mr">Mr. (Select List Option For Mr)</option>

核心注意点 #

• <option>的显示文本必须放在标签的开始和结束标记之间，绝对不能写在标签外面
• value是表单提交时的后台取值，不会直接显示在页面上（除非你写错了位置）
• 记得给<select>加上id，和<label>的for属性对应，点击标签就能聚焦下拉框，提升页面易用性

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