Question

我想动态修改select元素的选定索引。有时，来自选项的选项将导致其他选项中的选项被禁用。我可以在运行时更改时禁用选项，但我无法更改选择显示的选项。

例如，如果我有这个选择：

<select>
    <option>Even or Odd?</option>
    <option>Even</option>
    <option>Odd</option>
</select>

<select>
    <option value="">Pick a Number</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option
</select>

当选择“奇数”时，偶数将被禁用，但如果在第一个选择更改为“奇数”时已选择偶数，则即使第二个选择的所选索引现在为0，显示的值仍然是原始值。

我目前尝试过：

selects[i].selectedIndex = 0;
selects[i].value = "Pick a Number";
$(selects[i]).val("Pick a Number");
$(selects[i]).attrs("selectedIndex", 0);

最大的情况是所选索引将会更改，或者元素的值将变为空字符串，而不会实际更改页面上显示的内容。

Answer 1

尝试使用prop进行设置，除非您创建了一个名为attrs的内置函数，否则没有内置函数。

$(selects[i]).prop("selectedIndex", 0);

如果您为select选项定义了值，那么val也应该有效。（对于你没有的第一个），第二个只使用.val("")。 Pick a Number不是选项的值（而是＆＃34;＆＃34;）它是显示的文本，但即使某些浏览器允许您将其指定为值（如果未指定值），我也不会＃39;认为这适用于各种浏览器。因此，请始终为您的选项设置value属性。

你正在做的事情也可以做到：

selects[i].value = "Even or Odd?"; //for your first one
selects[i].value = ""; //for your second one
selects[i].value = "Pick a Number"; //Wont work for second one because you are overriding with an empty value attribute.

动态更改显示的选择文本

1 个答案: