如何从前端将 ASP.net 下拉列表索引设置为 0

Posted 2023-05-08

【中文标题】如何从前端将 ASP.net 下拉列表索引设置为 0

【英文标题】：How to set ASP.net dropdownlist index to 0 from the front-end

【发布时间】：2015-06-21 14:23:40

【问题描述】：

我在 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" />

JQuery 将所有三个下拉列表的索引设置为 0：

$(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
    );
);

如何修改下拉列表索引设置为 0。

第一个下拉列表的 html 渲染：

<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>

我尝试了以下 JQuery，它返回 null:

alert($("select#ddl1").val());

还尝试了以下方法，但没有成功：

$('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");
    

看起来，如果我删除所选的 Jquery，它可以正常工作：http://jsfiddle.net/bpbvhsay/

【问题讨论】：

你想要$('...').val(0)

我不认为 ddl1 等是实际的客户 ID。发布渲染的 HTML

试试alert($("select#ddl1").val());

“正确”的方式是直接引用：$('#<%= ddl1.ClientID %>').val(0)

试试这个：document.getElementById('ddl2').selectedIndex = 0;

【参考方案1】：

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

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

更新如您所说，您已经设置了ClientIDMode，请尝试以下更新功能：

function setSelectedIndex(selVal)
    var ddl1 = document.getElementById('ddl1');
    if(ddl1.length >= selVal)
    
       ddl1.selectedIndex = selVal;
    

并将其称为：

setSelectedIndex(0);

【讨论】：

我不必使用ddl1.ClientID，因为我使用的是ClientIDMode，但我会测试你的代码。谢谢。更新了您的代码以向我显示问题。

Ahhhhhhhhhhhhhh 我明白发生了什么。我正在使用所选的 JQuery 来设置我的下拉列表的样式。如果我删除它就可以了：/很可能选择的是干扰它。

【参考方案2】：

我使用的是 Chosen Jquery，导致下拉列表不更新。

这是 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>

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

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

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

这就行了。

【讨论】：

你应该问另一个问题。不要通过发布作为答案来提问。如果问题相似而不是相互链接。

@MMTac ***.com/questions/29656711/… 谢谢。