最可靠方法是用 $("#myselect option[value='5']").remove() 精准删除原始 select 下的 option,再调用 layui.form.render('select') 同步ui;务必同步更新数据源(如变量或 form.select.options),避免重新渲染恢复旧选项。

直接用 jQuery 删除特定 value 的 option 节点最可靠
想删掉下拉框里 value 为 "5" 的那个选项,别碰 empty() 或 html("")——它们会清空整个下拉框。正确做法是精准定位并移除目标 option 元素:
$("#mySelect option[value='5']").remove();- 紧接着必须调用
layui.form.render('select');,否则界面上还显示着,提交时值也照常带上 - 如果用了
lay-filter="city",渲染时可传第二个参数:layui.form.render('select', 'city');,避免全局重绘影响其他 select - 注意 value 类型:后端返回的 id 是数字还是字符串?
option[value=5]和option[value='5']在 jQuery 中匹配行为不同;建议统一用字符串写法,比如后端返回{"id": 5},前端存成value="5"再匹配
千万别操作 layui 渲染出的伪 DOM
Layui 会把原始 <select></select> 隐藏,再用 <div class="layui-form-select"> 模拟下拉面板。你看到的“选项列表”其实是它动态生成的 <code><dl><dd></dd></dl>,不是真实 option。
- 直接对
.layui-form-select dd调remove(),DOM 看似没了,但原始select里还留着,表单提交时照样带值 - 也不要试图用
find(".layui-this").remove()去删高亮项——这删的是 UI 层,和数据完全脱节 - 所有操作必须落在原始
<select></select>下的<option></option>上,这是唯一被表单提交识别的来源
删完 option 后,记得同步数据源
如果你的 select 是靠接口返回数组动态生成的(比如 result = [{id:1,name:'A'}, {id:2,name:'B'}]),光删 DOM 不够——下次重新加载或切换 tab,那个选项还会回来。
- 推荐把选项数据存在变量里,如
window.cityOptions = [] - 删 DOM 的同时,用
filter()更新该变量:window.cityOptions = window.cityOptions.filter(item => item.id !== 5); - 后续重新渲染(比如 tab 切换后)应基于更新后的变量生成
option,而不是重复请求原始接口 - 如果用了
form.select.options['city'] = [...](Layui 2.8+),删完也要同步改这个映射表,否则 render 会覆盖你的 DOM 修改
IE11 下 querySelector 匹配不稳定,得有 fallback
在 IE11 中,document.querySelector('select[name="city"] option[value="2"]') 可能返回 null,尤其当 value 带空格或特殊字符时。
- 稳妥做法是遍历原生
options集合:const sel = document.querySelector('select[name="city"]'); for (let i = 0; i - 删完仍要调
layui.form.render('select', 'city'); - 批量删除多个选项时,务必倒序遍历(从
length - 1往 0),否则索引会偏移
真实场景里最容易漏掉的,是数据源不同步和 IE11 的兼容性处理。DOM 删了,界面 render 了,但用户一刷新或切个 tab,选项又冒出来——问题不在渲染逻辑,而在你没管住那份数组。











