javascript - 在特殊情况下禁用来自 javascript 的 ddl 更改事件

Question

有两个单选按钮和一个下拉列表。如果选中 rad1 并且 dropdownlist 值发生更改，则执行下拉更改事件。如果选中rad2，则禁用更改事件(不是下拉列表)。

<asp:RadioButton ID="radNew" runat="server" Text="New" GroupName="radSelect" />
<asp:RadioButton ID="radExisting" runat="server" Text="Existing" GroupName="radSelect" />

<asp:DropDownList ID="ddlType" 
        runat="server"
        AutoPostBack="true"
        EnableViewState="true"
        onClick="return ddlClick();"
        OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>

Javascript:

function ddlClick() {
    if(document.getElementById('<%=radNew.ClientID%>').checked){
        return false;
    }
}

它仍在对 rad2 选择执行 dropdownlist 的更改事件吗？

Answer 1

备用 1

我们需要覆盖下拉菜单的onchange事件，然后根据条件执行所需的操作。

If the RadioButton is selected then 
   doYourStuff; 
   return false;
else
   Call __doPostBack function on the Dropdown

示例代码

默认.aspx

<form id="form1" runat="server">
<asp:RadioButton ID="radNew" runat="server" Text="New" GroupName="radSelect" />
<asp:RadioButton ID="radExisting" runat="server" Text="Existing" GroupName="radSelect" />
<asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" EnableViewState="true"
    OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>
<asp:Label runat="server" id="lbl" Text=""></asp:Label>
</form>
<script type="text/javascript">
    document.getElementById('<%=ddlType.ClientID%>').onchange = function () {
        if (document.getElementById('<%=radNew.ClientID%>').checked) {
            document.getElementById('<%=lbl.ClientID%>').textContent = "From js";
            return false;
        } else {
            setTimeout('__doPostBack(\'ddlType\',\'\')', 0);
        }
    };
</script>

默认.aspx.cs

protected void ddlType_SelectedIndexChanged(object sender, EventArgs e)
{
    lbl.Text = "From the server";
}  

<小时/>

备用 2

不要覆盖下拉菜单的 onchange 事件，而是将您的条件添加到默认的 dropdown onchange 事件中。

<asp:DropDownList ID="ddlType" runat="server" AutoPostBack="true" EnableViewState="true"
    onchange="if(!ddlCheck()){return false;}" OnSelectedIndexChanged="ddlType_SelectedIndexChanged">
    <asp:ListItem>Val1</asp:ListItem>
    <asp:ListItem>Val2</asp:ListItem>
    <asp:ListItem>Val3</asp:ListItem>
</asp:DropDownList>

<script type="text/javascript">
    function ddlCheck() {
        if (document.getElementById('<%=radNew.ClientID%>').checked) {
            document.getElementById('<%=lbl.ClientID%>').textContent = "From js";
            return false;
        } else {
            return true;
        }
    }
</script>

将以上内容加载到浏览器后下拉列表会像

<select name="ddlType" onchange="if(!ddlCheck()){console.log(&#39;to&#39;);return false;};
    setTimeout(&#39;__doPostBack(\&#39;ddlType\&#39;,\&#39;\&#39;)&#39;, 0)" id="ddlType">

因此，首先将检查我们的条件，然后根据条件执行其余操作。