javascript - js获取select选中的值 - js下拉菜单选中



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

我有一个已知值的下拉列表。 我想要做的是将下拉列表设置为我知道使用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(我猜IE浏览器6)的bug,但这非常烦人。

https://src-bin.com


Answer #1

所以我改变了它,现在它使用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)
            );
        });
    }
});

Answer #2

jQuery的文档指出:

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

这个行为在jQuery版本1.2及以上。

你很可能想要这样的:

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

Answer #3

你如何将值加载到下拉列表中或确定选择哪个值? 如果您使用Ajax进行此操作,那么在选择发生之前您需要延迟的原因可能是因为在执行问题行时未装入值。 这也可以解释为什么在设置状态之前在线上放置警报声明,因为警报操作会给数据加载带来足够的延迟。

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

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


Answer #4

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


Answer #5

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

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

然后你可以像这样在jQuery中调用ASP.NET控件:

$.clientID("_statusDDL")

Answer #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,并按照上述解决方案将“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 #7

看了一些解决方案后,这对我有用。

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

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

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

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

注意:

我想这是最短的,可靠的,一般的和优雅的解决方案。

因为在我的情况下,我正在使用选定选项的数据属性而不是value属性。 所以如果你对每个选项没有独特的价值,上面的方法是最短和最甜蜜的!


Answer #8

试试吧

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

而不是与

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

Answer #9

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

唷!

希望这可以帮助。


Answer #10
<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');




html-select