使用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（我猜IE浏览器6）的错误，但它是非常恼人的。
jQuery的文档指出：
[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中呈现控件ID。
试试吧
$("._statusDDL").val("2");
而不是与
$("._statusDDL").val(2);
看了一些解决方案后，这对我工作。
我有一个下拉列表的一些值，我想从另一个下拉列表中选择相同的值…所以首先我把一个变量我的第一个下拉列表的selectIndex 。
var indiceDatos = $('#myidddl')[0].selectedIndex;
然后，我在第二个下拉列表中选择该索引。
$('#myidddl2')[0].selectedIndex = indiceDatos;
注意：
我想这是最短的，可靠的，一般的和优雅的解决方案。
因为在我的情况下，我正在使用选定的选项的数据属性，而不是value属性。 所以如果你没有每个选项的独特价值，上面的方法是最短和甜蜜的！
这些解决方案似乎假设您的下拉列表中的每个项目都有一个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
唷！
希望这可以帮助。
我知道这是一个古老的问题，以上解决方案工作正常，除了在某些情况下。
喜欢
<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”而不是Item4.So，如果您使用
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等高级程序员对此的评论
所以我改变了它，现在它使用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) ); }); } });
我使用扩展函数来获取客户端ID，如下所示：
$.extend({ clientID: function(id) { return $("[id$='" + id + "']"); } });
然后你可以像这样调用jQuery中的ASP.NET控件：
$.clientID("_statusDDL")
另一种方法是在.net中设置控制参数ClientID =“Static”，然后通过您设置的ID访问JQuery中的对象。
只需要注意 – 我一直在jQuery中使用通配符选择器来获取被ASP.NET CLient ID混淆的项目 – 这也可以帮助您：
<asp:DropDownList id="MyDropDown" runat="server" /> $("[id* = 'MyDropDown']").append("<option value='-1'> </option>"); //etc
注意id *通配符 – 即使名称是“ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown”，它将查找您的元素
你如何加载到下拉列表中的值或确定选择哪个值？ 如果你正在使用Ajax来做这个事情，那么你在选择之前需要延迟的原因可能是因为在执行该行的时候没有加载这些值。 这也可以解释为什么在设置状态之前将警报声明放在行上，因为警报操作会给数据加载带来足够的延迟。
如果你使用的是jQuery的Ajax方法，你可以指定一个回调函数，然后把$("._statusDDL").val(2); 进入你的回调函数。
这将是一个更可靠的方法来处理这个问题，因为你可以确定在数据准备好的时候执行的方法，即使花了超过300毫秒。
如果我们有一个标题为“数据分类”的下拉菜单：
<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);
<asp:DropDownList id="MyDropDown" runat="server" />
使用$("select[name$='MyDropDown']").val() 。
<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');
