如何为select的option添加类似legend的自定义说明，仅提交option值？

当然可以轻松实现这个需求！你不需要额外的<legend>标签（它本来是给<fieldset>元素配套使用的，并不适合放在<option>内部），只需要利用<option>标签的value属性和标签内的显示文本，就能完美区分实际提交的核心值和用户看到的自定义说明，而且完全不会干扰后续的计算或表单提交逻辑。

核心思路 #

• 把需要提交的真实值（比如01）放在<option>的value属性里
• 把用户需要看到的说明文本（比如Mercedes）直接写在<option>标签内部，和值组合显示（比如01 - Mercedes）
• 表单提交或JS处理时，只会读取value属性的内容，标签内的说明文本仅用于展示，不会参与任何计算或提交

修改后的完整代码 #

<form action="./index.html" method="GET">
  Device Id: <input type="hidden" value="" name="idb" class="idb" />
  <select data-placeholder="Wpisz tutaj numery urządzenia" multiple class="chosen-select">
    <option value="" hidden></option>
    <option value="01">01 - Mercedes</option>
    <option value="02">02 - BMW</option>
    <option value="03">03 - Audi</option>
    <option value="04">04 - Volkswagen</option>
    <option value="05">05 - Ford</option>
    <option value="06">06 - Toyota</option>
    <option value="07">07 - Honda</option>
    <option value="08">08 - Nissan</option>
    <option value="09">09 - Hyundai</option>
    <option value="10">10 - Kia</option>
    <option value="11">11 - Peugeot</option>
    <option value="12">12 - Renault</option>
    <option value="13">13 - Citroën</option>
    <option value="14">14 - Skoda</option>
    <option value="15">15 - Seat</option>
    <option value="16">16 - Mazda</option>
    <option value="17">17 - Subaru</option>
    <option value="18">18 - Volvo</option>
    <option value="19">19 - Tesla</option>
    <option value="20">20 - Jeep</option>
    <option value="21">21 - Dodge</option>
    <option value="22">22 - Chevrolet</option>
    <option value="23">23 - GMC</option>
  </select>
  <input type="submit" value="Wyślij"/>
</form>
<script type="text/javascript">
  $(function() {
    $('.chosen-select').chosen({width: "20%"}).change(function(el) {
      let selectedOptions = [].slice.call(this.selectedOptions);
      let optionValues = selectedOptions.map(o => o.value);
      $(".idb").val(optionValues.join(","));
    });
    // to show the output
  });
</script>

方案优势说明 #

1. 原有逻辑完全兼容：你的JS代码原本就是通过o.value获取选中项的值，现在每个<option>都明确设置了value属性，所以不需要修改任何JS代码，就能继续正常收集并拼接选中的真实值到隐藏输入框中。
2. 用户体验清晰直观：用户能看到每个选项对应的说明文本，清楚知道自己选择的内容，但提交到后端或参与计算的只有你需要的编号（比如01）。
3. 符合HTML规范：这种用法是<option>标签的标准使用方式，兼容性拉满，不管是原生select还是你使用的Chosen插件都能完美支持。

如果想要给说明文本做样式区分（比如改成灰色小字体），还可以用CSS美化：

.chosen-results .option-desc {
  color: #666;
  font-size: 0.8em;
  margin-left: 8px;
}

然后把<option>里的说明用<span class="option-desc">Mercedes</span>包裹，就能实现更美观的显示效果啦！

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