jQuery - 禁用选项时更改选择值

Posted 2023-05-08

【中文标题】jQuery - 禁用选项时更改选择值

【英文标题】：jQuery - change select value when option is disabled

【发布时间】：2011-06-17 21:53:12

【问题描述】：

我有两个选择框，第一个选择框有两个选项：

第一组颜色 第二组颜色

第二个有几个选项：

红色 绿色 蓝色 粉红色

现在，当有人选择“第一组颜色”时，第二个选择框中的蓝色和粉红色会被禁用。 与其他选项相同。

问题是，如果您选择“第一组颜色”然后选择“第二组颜色”，即使选项被禁用，第二个选择框仍将选择蓝色或粉红色。

那么如何根据第一个选择框自动将其值更改为非禁用选项？

PS：对于禁用/启用效果我使用这个函数：jQuery - disable input field based on another field selected value

【问题讨论】：

如果问题与选项标签 disabled 属性的 iffy 跨浏览器支持有关，this thread might be useful.

【参考方案1】：

当第一个选择发生更改时，您可以从第二个选择的所有选项中删除 selected 属性，这样在第一个下拉列表更改后，您的第二个下拉列表中应该没有任何选择。

例如，假设第一个下拉菜单的 ID 为 sets，第二个下拉菜单的 ID 为 colors：

$("#sets").change(function () 
    $("#colors option:selected").removeAttr("selected");
);

Example (without proper enable/disable setup)