使用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的bug(我猜是Internet Explorer 6)，但这非常烦人。

当前回答

在我的情况下，我能够让它工作使用.attr()方法。

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

2018-09-18 18:10:55

其他回答

我使用一个扩展函数来获取客户端id，如下所示:

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

然后您可以调用ASP。jQuery中的NET控件如下:

$.clientID("_statusDDL")

2011-04-07 02:05:17

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

就像

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

因此，Item4将在浏览器中显示为“Selected”，现在您想将值更改为3，并显示“Item3”，而不是Item4。所以按照上面的解决方案，如果你使用

jQuery("#select_selector").val(3);

您将在浏览器中看到Item 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等高级程序员的评论

2015-02-11 07:52:29

试试

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

而不是和

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

2009-02-01 11:45:06

仅供参考，你不需要使用CSS类来完成这一点。

你可以写下面这行代码在客户端上获得正确的控件名称:

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

ASP。NET将在jQuery内部正确地呈现控件ID。

2009-04-21 02:16:22

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

2013-03-07 11:51:58

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

推荐文章

最新文章

标签