使用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的bug还是Internet Explorer 6（我猜是InternetExplorer6），但它非常烦人。

1535567 次浏览
小开
最佳答案

jQuery留档状态：

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

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

你最有可能想要这个：

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

添加.change()以查看下拉列表前端中的选项：

$("._statusDDL").val('2').change();
小开

试试看 

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

而不是与 

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

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

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

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

小开

仅供参考，您不需要使用CSS类来完成此操作。

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

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

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

小开

只是一个注意事项-我一直在jQuery中使用通配符选择器来获取被ASP.NET客户端ID混淆的项目-这也可能对您有所帮助：

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

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

小开

所以我改变了它，现在它使用在300毫秒后执行setTimeout。现在似乎正在工作。

我在从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));});}});
小开 
<asp:DropDownList id="MyDropDown" runat="server" />

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

小开

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

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

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

$.clientID("_statusDDL")
小开

另一种选择是在. net中设置控制参数ClientID="Static"，然后您可以通过您设置的ID访问JQuery中的对象。

小开

在看了一些解决方案后，这对我很有效。

我有一个包含一些值的下拉列表，我想从另一个下拉列表中选择相同的值……所以首先我在第一个下拉列表的selectIndex中放入一个变量。

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

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

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

备注：

我想这是最简短、可靠、通用和优雅的解决方案。

因为在我的情况下，我使用选定选项的数据属性而不是值属性。所以如果你没有每个选项的唯一值，上面的方法是最简短和甜蜜的！！

小开

对于隐藏字段，您需要像这样使用：

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

或

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

这些解决方案似乎假设下拉列表中的每个项目都有一个与它们在下拉列表中的位置相关的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 latervar 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 SelectedIndexif (selectedIndex < (itemsInDropDownList - 1)) {$("#listOfMonths").prop("selectedIndex", selectedIndex + 1);}}

我的网站对于展示如何使用JSON数据填充下拉列表也很有用：

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

小开 
<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>

客户端ID模式=“静态”

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

我知道这是一个老问题，除了在某些情况下，上述解决方案都很有效。

喜欢 

<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”，在severside语言中。

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

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

编辑：在“+newselectedIndex+”周围添加单引号，以便相同的功能可用于非数值。

所以我所做的实际上是，删除选定的属性，然后使新属性成为选定的。

我很感谢高级程序员@strager，@y0mbo，@ISIK和其他人对此发表评论

小开

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

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

在我的例子中，我能够使用. attr（）方法使其工作。

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

纯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>

小开

如果我们想从选项名称中找到，然后用jQuery选择选项，请参阅下面的代码：-

<div class="control"><select name="country_id" id="country" class="required-entry" title="Country" data-validate="{'validate-select':true}" aria-required="true"><option value=""> </option><option value="SA">Saudi Arabia</option><option value="AF">Afghanistan</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JO">Jordan</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US" selected="selected">United States</option></select></div><script type='text/javascript'>let countryRegion="India";jQuery("#country option:selected").removeAttr("selected");let cValue= jQuery("#country option:contains("+countryRegion+")").val();jQuery("#country option[value='"+cValue +"']").attr('selected', 'selected');</script>

我希望这将有助于！


提交答案