2013-09-25 31 views
0

我想动态修改select元素的选定索引。有时,来自选择的选项会导致其他选择中的选项被禁用。我可以在运行时更改选项时禁用这些选项,但我无法更改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); 

最会发生的是,所选择的指数会改变或元素的值将成为没有实际改变是什么在页面上显示一个空字符串。

+1

方法的名称是'attr'不'attrs'。 – undefined

+0

不仅如此,而且attr是使用错误的函数。根据下面的答案,道具是正确的。 –

+0

'选择[i] .selectedIndex = 0'应该可以工作。 – Barmar

回答

3

尝试使用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. 
+0

感谢,事实证明,我们最近的构建已使用选择元素的替换效果进行造型。我没有意识到这一点,但我一定会这样做,在未来。谢谢。 – jokulmorder

+1

实际上,HTML规范说,如果'

+0

@Barmar是的,但我记得有一些旧的IE版本的问题,如果我没有记错的话。 – PSL