关于javascript：使用jquery更改下拉列表的选定值


Change the selected value of a drop-down list with jQuery

我有一个具有已知值的下拉列表。我要做的是使用jquery将下拉列表设置为我知道存在的特定值。使用常规的javascript，我会做如下的事情：

1
2
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…)。

以下是我尝试过的一些事情：

1
2
$("._statusDDL").val(2); // Doesn't find 2 as a value.
$("._statusDDL").children("option").val(2) // Also failed.

如何使用jquery？

更新

事实证明，我第一次做对了：

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

当我把一个警报放在它上面的时候，它会正常工作，但是当我移除警报并让它全速运行时，我会得到这个错误。

Could not set the selected property. Invalid Index

我不确定这是jquery还是InternetExplorer6的问题(我猜是InternetExplorer6的问题)，但这非常烦人。

相关讨论

JQUERY's Documentation States:

[jQuery.val] checks, or selects, all the radio buttons, checkboxes, and select options that match the set of values.

这一行为在jQuery版1.2上。

你最喜欢这个

1
$("._statusDDL").val('2');
相关讨论

你需要像这样使用

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

黄金

1
$("._statusDDL").val(2).change();
相关讨论

只是一个FYI，你不需要用CSS班级来完成这个。

你可以写下代码的后续行，以便在顾客名称上获得正确的控制：

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

将把控件正确标识在JQuery内。

相关讨论

只是尝试

ZZU1

而不是

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

这些解决方案似乎假定下拉列表中的每个项都有一个与它们在下拉列表中的位置相关的val()值。

如果不是这样的话，事情会更复杂一些。

要读取下拉列表的所选索引，请使用以下命令：

1
$("#dropDownList").prop("selectedIndex");

要设置下拉列表的所选索引，请使用以下命令：

1
$("#dropDownList").prop("selectedIndex", 1);

注意prop()功能需要jquery v1.6或更高版本。

让我们看看如何使用这两个函数。

假设你有一个月名的下拉列表。

1
2
3
4
5
<select id="listOfMonths">
  <option id="JAN">January</option>
  <option id="FEB">February</option>
  <option id="MAR">March</option>
</select>

您可以添加"上个月"和"下个月"按钮，该按钮将查看当前选定的下拉列表项，并将其更改为上个月/下个月：

1
2
<button id="btnPrevMonth" title="Prev" onclick="btnPrevMonth_Click();return false;" />
<button id="btnNextMonth" title="Next" onclick="btnNextMonth_Click();return false;" />

下面是这些按钮将运行的javascript：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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网站

唷！！

希望这有帮助。

在寻找一些解决办法之后，这是为我工作的。

我有一份有价值的下载列表，我想从另一份下载列表中选择同样的价值。因此，首先，我将我的第一个跌落到一个变量。

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

然后，我在我的第二个下载列表上选择索引。

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

注：

我想这是一个简短、可信、通用和优雅的解决方案。

因为在我的案件中，我使用了选择性的选项数据属性来表示价值属性。所以，如果你对每一个选择都没有独特的价值，那么在方法上，这是最短和最甜蜜的！！

相关讨论

我知道这是一个古老的问题，除某些情况外，上述解决方案都很有效。

喜欢

1
2
3
4
5
6
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，并将"项目3"显示为已选定，而不是项目4。因此，根据上述解决方案，如果使用

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

在浏览器中，你会看到第3项被选中，但是当你用php或asp处理数据时，你会发现所选的值是"4"，原因是你的HTML看起来是这样的。

1
2
3
4
5
6
7
<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"。

所以我在这方面的最终解决方案

1
2
3
newselectedIndex = 3;
jQuery("#select_selector option:selected").removeAttr("selected");
jQuery("#select_selector option[value='"+newselectedIndex +"']").attr('selected', 'selected');

编辑：在"+newselectedindex+"周围添加单引号，以便对非数值使用相同的功能。

所以我要做的实际上是，删除选定的属性，然后使新的属性成为选定的。

我非常感谢@strager，@y0mbo，@isik等高级程序员对此的评论。

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

1
2
3
4
5
<select title="Data Classification">
    <option value="Top Secret">Top Secret</option>
    <option value="Secret">Secret</option>
    <option value="Confidential">Confidential</option>
</select>

我们可以把它变成一个变量：

1
var dataClsField = $('select[title="Data Classification"]');

然后将下拉列表的值放入另一个变量中：

1
var myValue ="Top Secret";  // this would have been"2" in your example

然后我们可以使用输入dataClsField的字段，查找myValue并使用.prop()进行选择：

1
dataClsField.find('option[value="'+ myValue +'"]').prop('selected', 'selected');

或者，您可以只使用.val()，但是您的.选择器只能在它与下拉列表中的一个类匹配时使用，并且您应该在括号内的值上使用引号，或者只使用前面设置的变量：

1
dataClsField.val(myValue);
BLCK1/

我从一个Ajax呼叫中装载数据的时候经常跑进来。我太用完了，在使用JQuery Selector的时候，需要时间去适应客户。为了纠正你所面临的问题，避免添加setTimeoutproperty，你可以简单地在AJAX呼叫中输入"async: false"，并给DOM足够的时间，使DOM回到你添加的对象。下面的小样品：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$.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)
            );
        });
    }
});

另一个选择是在网上设置控件参数="静态"，然后您可以在您设置的对话框中访问对象。

Just a note-I've using wildcard selectors in Jquery to grab items that are obfuscated by ASP.Net client IDS-this might help you too：

1
$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc

Note the id*wildcard-this will find your element even if the name is"ctl00$ctl00$ctl00$contentplaceholder1$contentplaceholder1$mydropdown"

我使用一个扩展功能来获得客户IDS，就像这样：

1
2
3
4
5
$.extend({
    clientID: function(id) {
        return $("[id$='" + id +"']");
    }
});

然后你可以叫ASP.Net controls in jquery like this：

1
$.clientID("_statusDDL")

你是如何将价值载入下载列表还是确定选择值的？How are you loading the values into the drop list or determining which value to select？如果你是用AJAX做这个的，那么在选择之前你需要延迟的原因可能是因为在这个问题被执行的时候，价值没有被加载。这还可以解释为什么当你在设置状态之前在线上发出警告声明时，警报行动会给数据负载提供足够的延迟。

如果你使用了一种JQuery的AJQUEX方法，你可以确定一个呼叫反馈函数，然后将$("._statusDDL").val(2);输入到你的呼叫反馈函数中。

这将是一个更可靠的处理问题的方法，因为你可以肯定，当数据准备好时，即使时间超过300&NBSP。

1
2
3
     </asp:ListItem>
     </asp:ListItem>
</asp:DropDownList>

clientIdMode="静态"

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

使用EDOCX1

相关讨论

在我的例子中，我可以使用.attr()方法让它工作。

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