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


840

我有一个带有已知值的下拉列表。我想做的是使用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),但这非常令人讨厌。


21
这里的问题最终是IE6的问题。我正在为select元素创建新的option元素,然后尝试将值设置为那些新创建的option元素之一。IE6错误地等待着它从脚本中获得控制权,以便在DOM中实际创建新元素,因此有效的是,我试图将下拉列表设置为尚不存在的选项。
phairoh

您可以使用纯JavaScriptdd1 = document.getElementsByClassName('classname here'); dd1.value = 2;
user2144406 '16

Answers:


1008

jQuery的文档指出:

[jQuery.val] 选中选择所有单选按钮,复选框,并选择与值集匹配的选项。

此行为在jQuery版本1.2和更高版本中。

您最可能希望这样做:

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

22
如果select隐藏了(display: none;),是否可以使用?我无法正常工作...
Padel

11
这只是使我免于编写“ $('._statusDDL [value="2"]').attr('selected',true);谢谢”之类的东西 !
罗勒

6
@Nordes,如果获得所选值将是这种情况。在这种情况下,它将设置选定的值,或更准确地说,是设置选定的选项。
乔恩·P

107
@JL:您需要添加.change()才能在下拉列表前端中看到该选项,即$('#myID').val(3).change();
Kai Noack

10
链接.change()应该添加到答案中。我以为我疯了,直到我通读了评论,该解决方案才起作用。
David Baucum

139

对于隐藏字段,您需要这样使用:

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

要么

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

您能否解释一下为什么您需要为隐藏字段触发更改事件?
塞缪尔

1
@Samuel:因为如果您使用jQuery更改了select的selected选项,则不会触发更改,因此需要手动触发。
machineaddict 2015年

2
如果在更改保管箱的值后需要触发更改事件,则需要在设置值后调用change函数。
tver3305 2015年

我特别需要触发变更事件,因此这对我最有帮助
Rohan

32

仅供参考,您无需使用CSS类即可完成此操作。

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

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

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


8
仅当您的JavaScript位于.aspx或.ascx标记内时,此方法才有效,而当它位于.js文件中时,则无效(在这种情况下)。另外,根据控件在应用程序中嵌套的深度(在我的情况下,控件的深度约为10层),ClientID可能会变得难以置信的长,并且如果使用得过于宽松,实际上可能会给JavaScript的大小增加很大的负担。如果可以的话,我会尽量减少标记。
phairoh

2
@ y0mbo但是,即使您转移到MVC,也应该将外部.JS文件用于JavaScript,以便浏览器和代理服务器可以对其进行缓存以提高性能。
09年

1
@Roberto-但是MVC不使用asp.net webforms所使用的愚蠢命名约定,因此您可以轻松地在外部js文件中引用所需的控件。
lloydphillips

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

1
我将尽快在ASP控件上设置ClientIDMode =“ Static”,这样您就知道ID将是您指定的ID。但是,如果要将该控件放入中继器,则必须小心。 msdn.microsoft.com/en-us/library/...
Shawson

25

只需尝试

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

而不是

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

23

这些解决方案似乎假定下拉列表中的每个项目都有一个与它们在下拉列表中的位置相关的val()值。

如果不是这种情况,事情会更加复杂。

读取下拉列表的选定索引,请使用以下命令:

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

设置下拉列表的选定索引,请使用以下命令:

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

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

让我们看看如何使用这两个函数。

假设您有一个下拉的月份名称列表。

<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

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

<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

这是这些按钮将运行的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

Ph!

希望这可以帮助。


20

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

我有一个带有一些值的下拉列表,我想从另一个下拉列表中选择相同的值...因此,首先我将第一个下拉列表的变量selectIndex放在其中。

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

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

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

注意:

我猜这是最短,可靠,通用且优雅的解决方案。

因为就我而言,我使用的是选定选项的data属性而不是value属性。因此,如果您对每个选项都没有唯一的价值,那么上述方法是最简短,最贴心的方法!


5
这是正确的答案,每个没有立即说出“ selectedIndex”的人都应该更加了解。Hurray DOM API和在石器时代写回它的人。
vsync

16

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

喜欢

<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并显示为“第3项”而不是第4项。因此,按照上述解决方案,如果您使用

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

您将在浏览器中看到第3项。但是,当您在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 +”周围添加单引号,以便可以将相同的功能用于非数字值。

因此,我要做的实际上是删除所选属性,然后将新属性设置为所选。

我将感谢@strager,@ y0mbo,@ISIK等高级程序员对此的评论


10

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

<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

我们可以将其放入一个变量中:

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

4

因此,我对其进行了更改,以便现在可以使用setTimeout在300毫秒后执行。似乎现在正在工作。

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

3

请注意-我一直在jQuery中使用通配符选择器来获取被ASP.NET CLient ID混淆的项目-这可能也对您有帮助:

<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

请注意id *通配符-即使名称为“ ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown”,也会找到您的元素


3

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

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

然后,您可以像这样在jQuery中调用ASP.NET控件:

$.clientID("_statusDDL")

3

另一个选择是在.net中设置控件参数ClientID =“ Static”,然后可以通过设置的ID访问JQuery中的对象。


3
<asp:DropDownList id="MyDropDown" runat="server" />

使用$("select[name$='MyDropDown']").val()


如果您要匹配的名称,则最好将其删除,$以使其完全匹配,而不是“结尾为”。但是您的建议可能比只匹配一个类名更快。甚至更快,虽然会element.classname#idname
亚历克

2

您如何将这些值加载到下拉列表中或确定要选择哪个值?如果使用Ajax进行此操作,则在选择之前需要延迟的原因可能是因为在执行相关行时未加载值。这也可以解释为什么在设置状态之前将警报语句放在行上时它起作用的原因,因为警报操作会给数据加载带来足够的延迟。

如果您使用的是jQuery的Ajax方法之一,则可以指定一个回调函数,然后放入 $("._statusDDL").val(2);放入您的回调函数中。

这将是处理该问题的一种更可靠的方法,因为您可以确定该方法在数据准备就绪时执行,即使花费的时间超过300毫秒也是如此。


2
<asp:DropDownList ID="DropUserType" ClientIDMode="Static" runat="server">
     <asp:ListItem Value="1" Text="aaa"></asp:ListItem>
     <asp:ListItem Value="2" Text="bbb"></asp:ListItem>
</asp:DropDownList>

ClientIDMode =“静态”

$('#DropUserType').val('1');

1

就我而言,我可以使用.attr()方法使其正常工作。

$("._statusDDL").attr("selected", "");
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.