我有一个带有已知值的下拉列表。我正在尝试将下拉列表设置为使用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),但这非常烦人。

/>

评论

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

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

javascriptstutorial.com/blog/…

#1 楼

jQuery的文档说明:


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


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

您最可能希望这样做:

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


评论


如果选择被隐藏(显示:无;),此方法有效吗?我无法正常工作...

–Padel
2010年7月13日在15:10

这只是让我免于编写$('._ statusDDL [value =“ 2”]')。attr('selected',true);之类的东西。谢谢!

–罗勒
2011年9月7日在13:48



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

–乔恩·P
2012年8月22日,0:41

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

– Kai Noack
13年8月10日在9:43

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

– David Baucum
2015年1月7日在20:33

#2 楼

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

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


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


评论


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

–塞缪尔
15年3月19日在18:40

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

–machineaddict
15年5月28日在9:11

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

–tver3305
2015年6月3日,10:25

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

–罗汉
2月24日4:18

#3 楼

只是一个FYI,您不需要使用CSS类来完成此操作。

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

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


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

评论


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

–phairoh
09年4月22日在20:49

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

– 7wp
09年12月15日在18:03

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

–lloydphillips
2010-1-20的1:50

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

– mikesigs
2010年5月6日下午16:33

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

–肖森
2012年9月24日上午9:16

#4 楼

只需尝试使用

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


,而不使用

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


#5 楼

这些解决方案似乎假设下拉列表中的每个项目都有一个与下拉列表中的位置相关的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/服务/WebServices-Page8.htm

#6 楼

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

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

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


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

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


注意:

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

因为我的情况,使用选定选项的数据属性而不是值属性。
因此,如果每个选项没有唯一的值,则上述方法最短,最贴心!

评论


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

– vsync
13年5月6日18:00

#7 楼

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



<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并显示“ Item3”而不是Item4。因此,根据上述解决方案,如果您使用

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 +”周围添加单引号,以便可以将相同的功能用于非数值。

我该怎么做实际上是删除了选定的属性,然后将其设为选定的新属性。

我很高兴从sen上对此发表评论诸如@strager,@ y0mbo,@ISIK等其他程序员

#8 楼

如果有一个标题为“数据分类”的下拉菜单:

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


#9 楼


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


从Ajax调用加载数据时,我遇到了很多次。我也使用.NET,并且在使用jQuery选择器时需要花费一些时间来适应clientId。为了更正您遇到的问题并避免添加setTimeout属性,您可以在Ajax调用中简单地输入“ async: false”,它将为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)
            );
        });
    }
});


#10 楼

请注意-我一直在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”,也会找到您的元素

#11 楼

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

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


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

$.clientID("_statusDDL")


#12 楼

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

#13 楼

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


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

评论


如果您在名称上进行匹配,则最好删除$,使其完全匹配,而不是“结尾为”。但是您的建议可能比只匹配一个类名更快。甚至更快的是element.classname或#idname。

– Alec
2010-10-7 20:37



#14 楼

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

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

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

#15 楼

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


#16 楼

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

$("._statusDDL").attr("selected", "");


#17 楼

纯JS
对于使用CSS选择器的现代浏览器,纯JS并不是问题。
document.querySelector('._statusDDL').value = 2;




 function change() {
  document.querySelector('._statusDDL').value = 2;
} 

 <select class="_statusDDL">
  <option value="1" selected>A</option>
  <option value="2">B</option>
  <option value="3">C</option>
</select>

<button onclick="change()">Change</button>