使用 jQuery 更改下拉列表的选定值

IT技术 javascript jquery asp.net html-select
2021-01-09 22:32:21

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

6个回答

jQuery 的文档说明:

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

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

你很可能想要这个:

$("._statusDDL").val('2');
@JL:您需要添加.change()以查看下拉列表前端中的选项,即$('#myID').val(3).change();
2021-03-31 22:32:21

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

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

或者

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

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

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

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

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

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

试试吧

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

而不是与

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