使用 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），但这非常烦人。
dd1 = document.getElementsByClassName('classname here'); dd1.value = 2;
[jQuery.val] 检查或选择与该组值匹配的所有单选按钮、复选框和选择选项。
此行为出现在 jQuery 版本 1.2 及更高版本中。
你很可能想要这个：
$("._statusDDL").val('2');
添加 .change() 以查看下拉列表前端中的选项：
$("._statusDDL").val('2').change();
使用隐藏字段，您需要像这样使用：
$("._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 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
仅供参考，您不需要使用 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;
笔记：
我想这是最短、可靠、通用和优雅的解决方案。
因为就我而言，我使用的是选定选项的数据属性而不是值属性。因此，如果您对每个选项都没有独特的价值，那么上述方法是最短的和甜蜜的！
我知道这是一个老问题，除某些情况外，上述解决方案都可以正常工作。
喜欢
<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 等高级程序员对此的评论
如果我们有一个标题为“数据分类”的下拉菜单：
<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);
所以我改变了它，现在它使用 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 中的对象。
<asp:DropDownList id="MyDropDown" runat="server" />
使用 $("select[name$='MyDropDown']").val()。
$，使其完全匹配，而不是“结尾于”。但是您的建议可能比仅匹配类名要快。 element.classname 或 #idname 会更快。
请注意——我一直在 jQuery 中使用通配符选择器来获取被 ASP.NET 客户端 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 毫秒。
<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');
就我而言，我能够使用 .attr() 方法让它工作。
$("._statusDDL").attr("selected", "");
纯JS
对于 modern browsers，使用 CSS 选择器对于纯 JS 来说不是问题
document.querySelector('._statusDDL').value = 2;
函数 change() { document.querySelector('._statusDDL').value = 2; }
如果我们想从选项名称中查找，然后使用 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>
我希望这个能帮上忙！
.change()才能看到下拉列表前端中的选项，即$('#myID').val(3).change();.change()以触发与该选择框的更改事件相关的任何功能:)。