使用jQuery更改下拉列表的选定值-Java 学习之路

741

我有一个包含已知值的下拉列表 . 我要做的是将下拉列表设置为我知道使用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做到这一点？

Update

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

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

当我在上方发出警报时，它工作正常，但当我删除警报并让它全速运行时，我收到错误

无法设置所选属性 . 索引无效

我不确定这是jQuery或Internet Explorer 6的错误（我猜的是Internet Explorer 6），但它非常烦人 .

16 回答

917

使用隐藏字段，您需要使用如下：

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

要么

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

回复于 2024-04-28T09:20:56+08:00

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

您可以编写以下代码行以在客户端上获取正确的控件名称：
```
$("#<%= statusDDL.ClientID %>").val("2");
```
ASP.NET将在jQuery中正确呈现控件ID .
回复于 2024-04-28T09:20:56+08:00

试试吧

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

而不是

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

回复于 2024-04-28T09:20:56+08:00

所以我改变它，现在它使用setTimeout在300毫秒后执行 . 似乎现在正在工作 .

从Ajax调用加载数据时，我遇到过很多次 . 我也使用.NET，在使用jQuery选择器时调整到clientId需要时间 . 要纠正您遇到的问题并避免必须添加 setTimeout 属性，您可以简单地在Ajax调用中放入“ async: false ”，它将为DOM提供足够的时间让对象返回您要添加到选择 . 以下小样本：

$.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)
            );
        });
    }
});

回复于 2024-04-28T09:20:56+08:00

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

回复于 2024-04-28T09:20:56+08:00

这些解决方案似乎假设下拉列表中的每个项目都具有与其在下拉列表中的位置相关的 val() 值 .

如果情况并非如此，事情就会复杂一些 .

要 read 下拉列表的选定索引，您将使用：

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

要 set 下拉列表的选定索引，您将使用此：

$("#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 !!

希望这可以帮助 .

回复于 2024-04-28T09:20:56+08:00

109

如何将值加载到下拉列表或确定要选择的值？如果您使用Ajax执行此操作，那么在选择发生之前需要延迟的原因可能是因为在执行相关行时未加载值 . 这也可以解释为什么在设置状态之前在线路上放置警报语句时它起作用，因为警报操作会给数据加载足够的延迟 .

如果您使用的是jQuery的Ajax方法之一，则可以指定回调函数，然后将 $("._statusDDL").val(2); 放入回调函数中 .

这是处理问题的一种更可靠的方法，因为您可以确保在数据准备就绪时执行该方法，即使花费的时间超过300毫秒 .

回复于 2024-04-28T09:20:56+08:00
1
在我的情况下，我能够使用.attr（）方法使其工作 .
```
$("._statusDDL").attr("selected", "");
```
回复于 2024-04-28T09:20:56+08:00
3
jQuery's documentation州：

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

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

你很可能想要这个：
```
$("._statusDDL").val('2');
```
回复于 2024-04-28T09:20:56+08:00
0
我知道这是一个老问题，上述解决方案除了在某些情况下工作正常 .

喜欢
```
<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');
```
EDIT ：在"+newselectedIndex+"周围添加单引号，以便相同的功能可用于非数值 .

所以我所做的实际上是删除了所选属性，然后将新属性设置为选中状态 .

我很感激来自@strager，@ y0mbo，@ ISIK等高级程序员的评论
回复于 2024-04-28T09:20:56+08:00
18
```
<asp:DropDownList id="MyDropDown" runat="server" />
```
使用 $("select[name$='MyDropDown']").val() .
回复于 2024-04-28T09:20:56+08:00
28
在看了一些解决方案后，这对我有用 .

我有一个带有一些值的下拉列表，我想从另一个下拉列表中选择相同的值...所以首先我输入一个变量 selectIndex 我的第一个下拉列表 .
```
var indiceDatos = $('#myidddl')[0].selectedIndex;
```
然后，我在第二个下拉列表中选择该索引 .
```
$('#myidddl2')[0].selectedIndex = indiceDatos;
```
Note:

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

因为在我的情况下，我使用选定选项的数据属性而不是值属性 . 所以如果你没有每个选项的独特 Value ，上面的方法是最短和甜！
回复于 2024-04-28T09:20:56+08:00
4
只是一个注释 - 我一直在jQuery中使用通配符选择器来获取被ASP.NET CLient ID混淆的项目 - 这也可能对你有所帮助：
```
<asp:DropDownList id="MyDropDown" runat="server" />

$("[id* = 'MyDropDown']").append("<option value='-1'>&nbsp;</option>"); //etc
```
注意id *通配符 - 即使名称为“ctl00 $ ctl00 $ ContentPlaceHolder1 $ ContentPlaceHolder1 $ MyDropDown”，也会找到你的元素
回复于 2024-04-28T09:20:56+08:00
3
我使用扩展函数来获取客户端ID，如下所示：
```
$.extend({
    clientID: function(id) {
        return $("[id$='" + id + "']");
    }
});
```
然后你可以在jQuery中调用ASP.NET控件，如下所示：
```
$.clientID("_statusDDL")
```
回复于 2024-04-28T09:20:56+08:00
2
如果我们有一个 Headers 为“数据分类”的下拉列表：
```
<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);
```
回复于 2024-04-28T09:20:56+08:00
12

另一个选项是在.net中设置控制参数ClientID =“Static”，然后您可以通过您设置的ID访问JQuery中的对象 .

回复于 2024-04-28T09:20:56+08:00

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

16 回答

相关问题