动态改变显示的选择文本

Question

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

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

<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>

When "Odd" is selected, the even numbers will be disabled, but if an even number was already selected when the first select was changed to "Odd" then even though the selected index for the second select is now 0, the显示的值还是原来的值。

我目前已经尝试过：

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);

如果您为选择选项定义了值，您的val 也应该可以工作。 （对于您没有的第一个），对于第二个只需使用.val("")。 Pick a Number 不是选项的值（而是“”），它是显示的文本，但即使某些浏览器允许您将其指定为值（如果未指定值），我认为这不适用于跨浏览器。因此，请始终为您的选项设置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.