是否存在div contenteditable对应的select-option版本，无需JS即可实现？

有两种完全不需要JavaScript的可行方案，均可以实现需求，且组件内容不会随表单提交： #

方案1：原生表单元素改造（最简实现） #

原生表单元素只要不设置name属性、或设置disabled属性，内容就不会随表单提交。如果需要可编辑下拉功能，用<input> + <datalist>组合即可实现，不给输入框加name属性就不会被提交：

<!-- 该组件无带name的有效表单元素，内容不会随表单提交 -->
<input list="editable-select" placeholder="选择或输入内容">
<datalist id="editable-select">
  <option value="选项1">
  <option value="选项2">
  <option value="选项3">
</datalist>

特点：

• 原生自带输入+下拉选择交互，无需额外写逻辑
• 代码量极小，兼容性覆盖所有主流浏览器

方案2：纯CSS模拟自定义下拉（完全符合你给出的自定义结构） #

利用CSS的:focus、:checked伪类实现展开收起、选中赋值交互，完全用自定义div结构实现，天然不会被表单识别提交：

<style>
.custom-select {
  position: relative;
  width: 200px;
  border: 1px solid #ccc;
  padding: 4px 8px;
  cursor: pointer;
}
/* 点击/聚焦时展开选项 */
.custom-select:focus .option-list,
.custom-select:active .option-list {
  display: block;
}
.option-list {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  margin: 0;
  padding: 0;
}
.option-item {
  display: block;
  padding: 4px 8px;
  cursor: pointer;
}
.option-item:hover {
  background: #f0f0f0;
}
/* 隐藏单选框，仅用来做状态控制 */
.option-radio {
  display: none;
}
/* 选中后自动切换显示的值 */
#opt1:checked ~ .select-value::after { content: "选项1"; }
#opt2:checked ~ .select-value::after { content: "选项2"; }
#opt3:checked ~ .select-value::after { content: "选项3"; }
</style>

<!-- 和你给出的理想实现结构完全一致，无有效提交元素 -->
<div class="custom-select" tabindex="0" select="true">
  <!-- 单选框关联了不存在的表单ID，不会被当前表单识别提交 -->
  <input type="radio" form="dummy-form" name="select-group" id="opt1" class="option-radio">
  <input type="radio" form="dummy-form" name="select-group" id="opt2" class="option-radio">
  <input type="radio" form="dummy-form" name="select-group" id="opt3" class="option-radio">
  <div class="select-value">请选择选项</div>
  <div class="option-list">
    <label class="option-item" option="true" for="opt1">选项1</label>
    <label class="option-item" option="true" for="opt2">选项2</label>
    <label class="option-item" option="true" for="opt3">选项3</label>
  </div>
</div>

特点：

• 完全自定义结构和样式，不受原生表单组件的样式限制
• 没有可被表单识别的提交元素，绝对不会把内容带入提交数据

补充说明 #

如果要放在表单内使用，只要确保组件内部没有带name属性且未禁用的表单元素，就不会出现意外提交的问题，无需额外处理。

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