javascript - jQuery更改下拉列表的选定值

  显示原文与译文双语对照的内容

我有一个已知值的drop-down列表。 我想做的是把下拉列表设置为一个我知道使用jQuery存在的值。 使用常规 JavaScript,我将执行以下操作:


ddl = document.getElementById("ID of element goes here");
ddl.value = 2;//2 being the value I want to set it to.

但是,我需要使用jQuery来实现这个目的,因为我正在为选择器( 愚蠢的ASP.NET 客户端 ids 。。) 使用CSS类。

下面是一些我尝试过的东西:


$("._statusDDL").val(2);//Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2)//Also failed.

如何使用jQuery实现它?

更新

因此,我第一次使用它的时候是正确的:


$("._statusDDL").val(2);

当我在上面放置一个警报时,它工作正常,但是当我删除警报并全速运行时,我得到了错误

无法设置所选属性。 无效索引

我不知道是不是一个用 jQuery Bug 或者 IE 6 ( 我猜 IE 6 ),但这未免也太让人讨厌。

时间:

文档状态的文档:

[jQuery.val] 检查或者选择所有单选按钮,复选框,并选择匹配值集合的选项。

这里行为在jQuery版本 1.2和上版本中。

你很可能需要:


$("._statusDDL").val('2');

使用隐藏字段,你需要这样使用:


$("._statusDDL").val(2);
$("._statusDDL").change();

或者


$("._statusDDL").val(2).change();

仅供参考,你不需要使用CSS类来完成这里操作。

你可以编写以下代码行,在客户端上获得正确的控制名称:


$("#<%= statusDDL.ClientID %>").val("2");

ASP.NET 将在jQuery内部正确呈现控件标识。

在查看了一些解决方案之后,这对我来说很有用。

drop-down列表中有一些值,我想从另一个drop-down列表中选择相同的值。。 在我的第一个 selectIndex,所以首先我put.在变量中


var indiceDatos = $('#myidddl')[0].selectedIndex;

然后,我在第二个drop-down列表中选择索引。


$('#myidddl2')[0].selectedIndex = indiceDatos;

备注:

我猜这是最短,可靠,一般和优雅的解决方案。

因此,在我的例子中,我使用选项属性的选择数据而不是值属性。 所以如果你对每个选项都没有唯一的值,那么上面的方法是最短的和甜蜜的 !

所以我改变了它,现在它在 300毫秒后使用 setTimeout 。 现在似乎正常了

从Ajax调用加载数据时,我遇到了很多次。 我也使用. NET,当使用jQuery选择器时,需要花时间来调整 clientId 。 为了纠正你所拥有的问题并避免添加 setTimeout 属性,你可以简单地将" async: false"放入Ajax调用中,它将给DOM足够的时间使对象回到你正在添加的对象。 下面是一个小示例:


$.ajax({
 type:"POST",
 url: document.URL + '/PageList',
 data:"{}",
 async: false,
 contentType:"application/json; charset=utf-8",
 dataType:"json",
 success: function (response) {
 var pages = (typeof response.d) == 'string'? eval('(' + response.d + ')') : response.d;

 $('#locPage' + locId).find('option').remove();

 $.each(pages, function () {
 $('#locPage' + locId).append(
 $('<option></option>').val(this.PageId).html(this.Name)
 );
 });
 }
});

我使用扩展函数获取客户端标识,如下所示:


$.extend({
 clientID: function(id) {
 return $("[id$='" + id +"']");
 }
});

然后你可以像这样调用jQuery中的ASP.NET 控件:


$.clientID("_statusDDL")

我知道这是一个古老的问题,上面的解决方案在某些情况下效果不错。


<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

因此,项目 4将显示为浏览器中的"选定",现在你想要将该值更改为 3,而不是按上面的解决方案来显示"指派的",而不是 Item4.So 。


jQuery("#select_selector").val(3);

你将看到项 3选定状态时 browser.But 中处理数据无论是在php或者 asp,你会发现所选择的值,如" 4"。它的原因是,你的html看起来会像这样。


<select id="select_selector">
<option value="1">Item1</option>
<option value="2">Item2</option>
<option value="3" selected="selected">Item3</option>
<option value="4" selected="selected">Item4</option>
<option value="5">Item5</option>
</select>

它将最后一个值作为" 4"侧边语言中的最后一个值。

所以我在这方面的最终解决方案


newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected'); 

编辑: 在"+newselectedindex+"周围添加单引号,以便在non-numerical值中使用相同的功能。

所以我所做的实际上是删除选中的属性,然后将新的属性作为选中的。

我很欣赏来自 @strager,@y0mbo,@ISIK 等高级程序员的评论

...