我有一个已知值的下拉列表。我要做的是将下拉列表设置为我知道使用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的bug(我猜是Internet Explorer 6),但这非常烦人。


当前回答

这些解决方案似乎假设下拉列表中的每个项都有一个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

其他回答

<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=“Static”

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

只是一个注释-我一直在使用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”

如果我们有一个标题为“Data Classification”的下拉列表:

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

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