本文介绍如何在用户勾选复选框后，通过弹窗获取输入值，将其设为下拉列表的选中项，并禁用该下拉框，防止后续修改。重点解决 val() 赋值失效问题，并提供安全、可维护的实现方案。
本文介绍如何在用户勾选复选框后，通过弹窗获取输入值，将其设为下拉列表的选中项，并禁用该下拉框，防止后续修改。重点解决 `val()` 赋值失效问题，并提供安全、可维护的实现方案。
在 Web 表单交互中，常需根据用户操作动态控制表单控件的状态与值。例如：当用户选择“新建资源组”时，应禁用预置下拉菜单，并将用户手动输入的资源组名称设为其当前选中值。但直接调用 $('#groupunderwriter').val('rgname') 无法生效——因为该值未真实存在于 <select></select> 的 <option></option> 列表中，jQuery 的 .val() 只能匹配已存在的 value 属性。
✅ 正确做法分为两步：
- 动态追加选项（确保值存在）；
- 再设置选中状态（触发 UI 更新）。
以下是优化后的完整 JavaScript 实现（含防重复、XSS 防护和空值处理）：
$(document).on('change', '#IsAssociation', function () {
const $select = $('#groupunderwriter');
if ($(this).prop('checked')) {
// 获取用户输入（去除首尾空格）
const rgname = prompt("请输入资源组名称：").trim();
if (!rgname) {
alert("资源组名称不能为空！");
$(this).prop('checked', false); // 恢复未选中状态
return;
}
// ✅ 安全地创建新 option（避免 XSS：对显示文本做 HTML 编码）
const escapedName = $('<div>').text(rgname).html(); // 简单编码
const newOption = `<option value="${rgname}" selected>${escapedName}</option>`;
// 先清空除默认提示项外的所有选项（可选：保留原选项？按需调整）
$select.find('option:not([disabled][selected])').remove();
// 追加新选项并设为选中
$select.append(newOption);
// 显式设置值（冗余但保险）
$select.val(rgname);
// 禁用下拉框
$select.prop('disabled', true);
} else {
// 恢复启用，并重置为默认提示项
$select.prop('disabled', false);
$select.val(''); // 触发默认 disabled+selected 选项激活
}
});<p>⚠️ 注意事项： </p>
<ul>
<li>
<strong>PHP 模板中的语法错误已修复</strong>：原代码 <code>echo "<option value="strtolower($item)">$item</option>";</code> 应改为 <code>echo "<option value='" . strtolower($item) . "'>$item</option>";</code>，否则 <code>strtolower($item)</code> 会被当作字符串字面量而非函数调用。 </li>
<li>
<strong>不要混用 <code>attr('disabled', 'disabled')</code> 和 <code>prop('disabled', true)</code></strong>：推荐统一使用 <code>.prop()</code> 操作布尔属性，语义更准确且兼容性更好。 </li>
<li>
<strong>避免重复添加相同值</strong>：如需支持多次切换，建议记录已添加的值或在恢复时重建原始选项列表。 </li>
<li>
<strong>无障碍友好</strong>：禁用后，屏幕阅读器会跳过该控件，若业务允许，也可考虑改用 <code>readonly</code> + 自定义样式替代 <code>disabled</code>，但需注意 <code><select></select></code> 不支持 <code>readonly</code>，故 <code>disabled</code> 是标准方案。</li>
</ul>
<p>总结：设置 <code><select></select></code> 的值本质是「让其 <code>value</code> 匹配某个 <code><option></option></code> 的 <code>value</code>」。若目标值不存在，必须先创建对应 <code><option></option></code>。结合 <code>.append()</code> 与 <code>.val()</code> 并确保 DOM 更新完成，即可可靠实现动态赋值与禁用一体化控制。</p>
</div>Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
