1. 技术文章
  2. 使用jQuery更改下拉列表的选定值

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

由 浪尽此生 提交于 2019-12-27 09:36:33

我有一个带有已知值的下拉列表。 我正在尝试将下拉列表设置为使用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），但这非常令人讨厌。

#1楼

在查看了一些解决方案之后，这对我有用。

我有一个带有一些值的下拉列表，我想从另一个下拉列表中选择相同的值...因此，首先我将第一个下拉列表的selectIndex放入变量中。 

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

然后，在第二个下拉列表中选择该索引。 

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

注意：

我猜这是最短，可靠，通用且优雅的解决方案。

因为就我而言，我使用的是选定选项的data属性而不是value属性。 因此，如果您对每个选项都没有唯一的价值，那么上述方法是最简短，最贴心的方法！

#2楼

对于隐藏字段，您需要这样使用： 

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

要么 

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

#3楼

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

ew！

希望这可以帮助。

#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”，也会找到您的元素

#5楼

<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 =“静态” 

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

#6楼

我知道这是一个老问题，上述解决方案在某些情况下可以正常工作。

喜欢 

<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项。因此，按照上述解决方案，如果您使用 

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

#7楼

因此，我对其进行了更改，以使其现在可以使用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)
            );
        });
    }
});

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

#9楼

<asp:DropDownList id="MyDropDown" runat="server" />

使用$("select[name$='MyDropDown']").val() 。

#10楼

jQuery的文档指出：

[jQuery.val] 选中或选择所有单选按钮，复选框，并选择与值集匹配的选项。

jQuery 1.2及更高版本中具有此行为。

您最可能希望这样做： 

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

#11楼

只需尝试 

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

而不是 

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

#12楼

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

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

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

#13楼

就我而言，我可以使用.attr（）方法使其正常工作。 

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

#14楼

我使用扩展函数来获取客户端ID，如下所示： 

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

然后，您可以像这样在jQuery中调用ASP.NET控件： 

$.clientID("_statusDDL")

#15楼

仅供参考，您无需使用CSS类即可完成此操作。

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

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

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

#16楼

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

标签
jquery
jquery选择器
select
option
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!