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

Question

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

Answer 1

jQuery的文档说明:

[jQuery.val]检查或选择所有单选按钮,复选框,并选择与该组值匹配的选项.

此行为是在jQuery版本1.2及以上.

你最有可能想要这个:

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

Answer 2

使用隐藏字段,您需要使用如下:

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

要么

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

Answer 3

仅仅是一个FYI,您不需要使用CSS类来完成此任务.

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

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

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

Answer 4

试试吧

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

而不是

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

Answer 5

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

P !!

希望这可以帮助.

Answer 6

在查看了一些解决方案后,这对我有用.

我有一个带有一些值的下拉列表,我想从另一个下拉列表中选择相同的值...所以首先我输入selectIndex我的第一个下拉列表的变量.

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

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

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

注意:

我想这是最短,可靠,通用和优雅的解决方案.

因为在我的情况下,我使用选择的选项的数据属性而不是值属性.因此,如果您没有为每个选项提供独特的价值,那么上述方法是最短且最甜蜜的!

Answer 7

我知道这是一个老问题,上述解决方案除了在某些情况下工作正常.

喜欢

<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.So根据上述解决方案,如果您使用

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等高级程序员的评论

Answer 8

如果我们有一个标题为"数据分类"的下拉列表:

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