Jquery 如何从前端将ASP.net dropdownlist索引设置为0

我在ASP.net页面中有以下代码：

<asp:DropDownList ClientIDMode="Static" ID="ddl1" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl2" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
<asp:DropDownList ClientIDMode="Static" ID="ddl3" CssClass="chosen-select le" runat="server" AppendDataBoundItems="true"></asp:DropDownList>

<input type="button" id="ClearForm" value="Clear" class="btn1" />

如何修改，使dropdownlist索引设置为0

第一个dropdownlist的HTML呈现：

$(function () {
    $("body").on("click", "#ClearForm", function (e) {
        e.preventDefault();
        $("select#ddl1, select#ddl2, select#ddl3").prop('selectedIndex', 0); //does not set the selected index to 0
        alert($("select#ddl1").text()); //displays all the options from #ddl1
    });
});

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

还尝试了以下操作，但无效：

$('select').each(function () {
    $(this).find('option:first').prop('selected', 'selected');
});

添加了以下JavaScript：

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    alert(ddl1.selectedIndex);
    if (ddl1.length >= selVal) { //if the selected value is greater then 0, the alert is shown but the value is not set back to 0.
        ddl1.selectedIndex = selVal;
        alert("greater or equal");
    }
    else {
        alert("not greater or equal");
    }
}

function setSelectedIndex(dropdownlist, selVal)
    var ddl1 = document.getElementById(dropdownlist);
    //alert(ddl1.selectedIndex); //displays the proper index...
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

---

看起来，如果我删除所选的Jquery，它就可以正常工作：

有很多方法可以做到这一点，但下面是JavaScript的解决方案：

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    alert(ddl1.selectedIndex);
    if (ddl1.length >= selVal) { //if the selected value is greater then 0, the alert is shown but the value is not set back to 0.
        ddl1.selectedIndex = selVal;
        alert("greater or equal");
    }
    else {
        alert("not greater or equal");
    }
}

function setSelectedIndex(dropdownlist, selVal)
    var ddl1 = document.getElementById(dropdownlist);
    //alert(ddl1.selectedIndex); //displays the proper index...
    if(ddl1.length >= selVal)
    {
       ddl1.selectedIndex = selVal;
    }
}

根据需要调用上述函数，如下所示：

setSelectedIndex('<%=ddl1.ClientID %>', 2);

并称之为：

setSelectedIndex(0);

---

我使用的是所选的Jquery，这导致dropdownlist无法更新

这是HTML：

<select name="ctl00$BodyPlaceHolder$ddl1" id="ddl1" class="chose-select le">
    <option value="Select a State">Select a State</option>
    <option value="Alabama">AL</option>
    <option value="Alaska">AK</option>
    <option value="Arizona">AZ</option>
</select>

选择一个状态
艾尔
AK
阿兹

将所选索引设置为0的JavaScript：

function setSelectedIndex(dropdownlist, selVal) {
    var ddl1 = document.getElementById(dropdownlist);
    if (selVal < ddl1.selectedIndex) {
        ddl1.selectedIndex = selVal;

        $(ddl1).val(0).trigger('chosen:updated');
    }
}

函数集selectedIndex（下拉列表，selVal）{
var ddl1=document.getElementById（dropdownlist）；
如果（selVal

---

这就是诀窍。

您想要

$（'…'）.val（0）

我不认为

ddl1

etc是实际的客户端id。发布呈现的HTMLTry

警报（$（$（'select#ddl1”）.val（）

正确的方法是直接引用它：

$（'#'）.val（0）

尝试一下：

document.getElementById（'ddl2'）。selectedIndex=0

我不必使用

ddl1.ClientID

，因为我正在使用

clientdmode

，但我将测试您的代码。谢谢更新了你的代码以向我显示问题。啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊。我正在使用所选的JQuery设置dropdownlist的样式。如果我删除它，它很可能会起作用。你应该问另一个问题。不要通过发布答案来提问。如果问题相似，请互相链接。@MMTac谢谢。