使用jQuery更改下拉列表的选定值

我有一个包含已知值的下拉列表.我想要做的是将下拉列表设置为我知道使用jQuery存在的特定值.使用常规JavaScript,我会做类似的事情:

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

但是,我需要使用jQuery,因为我正在为我的选择器使用CSS类(愚蠢的ASP.NET客户端ID ...).

以下是我尝试过的一些事情:

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

我怎么能用jQuery做到这一点？

更新

事实证明,我第一次做对了:

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

当我在上方发出警报时,它工作正常,但当我删除警报并让它全速运行时,我收到错误

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

我不确定这是jQuery还是Internet Explorer 6的错误(我猜的是Internet Explorer 6),但它非常烦人.

1> strager..：

---

jQuery的文档说明:

[jQuery.val]检查或选择所有单选按钮,复选框,并选择与该组值匹配的选项.

此行为是在jQuery版本1.2及以上.

你最有可能想要这个:

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

---

@JL:你需要添加`.change()`来查看下拉列表前端的选项,即`$('#myID').val(3).change();`

---

如果`select`被隐藏(`display:none;`),这是否有效？我无法让它正常工作......

---

这只是让我免于编写`$('.status.dDL [value ="2"]').attr('selected',true);`谢谢!

---

应该将.change()链接到答案中.在我通读评论之前,我认为我的解决方案无法解决这个问题.

---

如果获得所选值,则会出现@Nordes.在这种情况下,它设置所选值,或更准确地说,设置所选选项.

---

如果两个选项的值相同怎么办？请参阅[this](http://stackoverflow.com/a/10640466/415865)答案的注释部分.

---

`.change()`也可以触发任何可能附加到select的onchange上的事件.

2> 小智..：

---

使用隐藏字段,您需要使用如下:

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

要么

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

---

如果在更改保管箱的值后需要更改事件,则需要在设置值后调用更改功能.

3> y0mbo..：

---

仅仅是一个FYI,您不需要使用CSS类来完成此任务.

您可以编写以下代码行以在客户端上获取正确的控件名称:

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

ASP.NET将在jQuery中正确呈现控件ID.

---

这只适用于你的javascript在.aspx或.ascx标记内,而不是在.js文件中,就像这里的情况一样.此外,根据您的应用程序嵌套在您的应用程序中的深度(在我的情况下,它们大约有10个级别),ClientID可能会变得非常长,并且如果过于宽松地使用,实际上可能会增加大量的javascript.如果可以的话,我尽量保持我的标记尽可能小.

---

如果您创建OO样式的javascript,则可以将客户端ID传递给对象的构造函数.目标代码全部包含在外部js文件中,但您可以从aspx代码中实例化它.

---

@ y0mbo但即使你转移到MVC,你仍然应该为你的JavaScript使用外部.JS文件,以便浏览器和代理服务器可以缓存它以提高性能.

4> emas..：

---

试试吧

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

而不是

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

5> Mike Gledhil..：

---

这些解决方案似乎假设下拉列表中的每个项目都具有与其在下拉列表中的位置相关的val()值.

如果情况并非如此,事情就会复杂一些.

要读取下拉列表的选定索引,您可以使用:

$("#dropDownList").prop("selectedIndex");

要设置下拉列表的选定索引,您可以使用:

$("#dropDownList").prop("selectedIndex", 1);

请注意,prop()功能需要JQuery v1.6或更高版本.

让我们看看你将如何使用这两个函数.

假设您有月份名称的下拉列表.

  January
  February
  March

您可以添加"上个月"和"下个月"按钮,该按钮查看当前选定的下拉列表项,并将其更改为上一个/下个月:

这是这些按钮运行的JavaScript:

function btnPrevMonth_Click() {
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    if (selectedIndex > 0) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex - 1);
    }
}
function btnNextMonth_Click() {
    //  Note:  the JQuery "prop" function requires JQuery v1.6 or later
    var selectedIndex = $("#listOfMonths").prop("selectedIndex");
    var itemsInDropDownList = $("#listOfMonths option").length;

    //  If we're not already selecting the last item in the drop down list, then increment the SelectedIndex
    if (selectedIndex < (itemsInDropDownList - 1)) {
        $("#listOfMonths").prop("selectedIndex", selectedIndex + 1);
    }
}

以下站点也很有用,用于说明如何使用JSON数据填充下拉列表:

http://mikesknowledgebase.com/pages/Services/WebServices-Page8.htm

P !!

希望这可以帮助.

6> 小智..：

---

在查看了一些解决方案后,这对我有用.

我有一个带有一些值的下拉列表,我想从另一个下拉列表中选择相同的值...所以首先我输入selectIndex我的第一个下拉列表的变量.

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

然后,我在第二个下拉列表中选择该索引.

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

注意:

我想这是最短,可靠,通用和优雅的解决方案.

因为在我的情况下,我使用选择的选项的数据属性而不是值属性.因此,如果您没有为每个选项提供独特的价值,那么上述方法是最短且最甜蜜的!

---

这是正确的答案,所有没有立即说出"selectedIndex"的人都应该知道的更好.Hurray DOM API和那些在石器时代写回来的人.

7> 小智..：

---

我知道这是一个老问题,上述解决方案除了在某些情况下工作正常.

喜欢

Item1
Item2
Item3
Item4
Item5

因此,项目4将在浏览器中显示为"已选择",现在您要将值更改为3并将"Item3"显示为已选择而不是Item4.So根据上述解决方案,如果您使用

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

您将在浏览器中看到项目3已选中.但是当您在php或asp中处理数据时,您会发现所选值为"4".原因是,您的html将如下所示.

Item1
Item2
Item3
Item4
Item5

并且它在服务器端语言中获得最后一个值为"4".

这是我的最终解决方案

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

编辑:在"+ newselectedIndex +"周围添加单引号,以便相同的功能可用于非数值.

所以我所做的实际上是删除了所选属性,然后将新属性设置为选中状态.

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

8> vapcguy..：

---

如果我们有一个标题为"数据分类"的下拉列表:

    Top Secret
    Secret
    Confidential

我们可以把它变成一个变量:

var dataClsField = $('select[title="Data Classification"]');

然后将我们希望下拉列表具有的值放入另一个变量:

var myValue = "Top Secret";  // this would have been "2" in your example

然后我们可以使用我们放入的字段dataClsField,进行查找myValue并使用.prop()以下选项进行选择:

dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

或者,您可以使用.val(),但.只有在匹配下拉列表中的类时才能使用您的选择器,并且您应该在括号内的值上使用引号,或者只使用我们之前设置的变量:

dataClsField.val(myValue);