Ausführen von Javascript, nachdem der ausgewählte Wert des Steuerelements festgelegt wurde

StackOverflow https://stackoverflow.com/questions/9341

  •  08-06-2019
  •  | 
  •  

Frage

Einfache ASP.NET-Anwendung.

Ich habe zwei Dropdown-Steuerelemente.Im ersten Dropdown-Menü habe ich ein JavaScript onChange Ereignis.Das JavaScript aktiviert das zweite Dropdown-Menü und entfernt einen Wert daraus (den im ersten Dropdown-Menü ausgewählten Wert).Wenn sie auf den leeren ersten Wert des Dropdown-Menüs klicken, wird das zweite Dropdown-Menü deaktiviert (und die Optionen zurückgesetzt).

Ich habe auch Code in der OnPreRender Methode, die das zweite Dropdown-Menü basierend auf dem Wert des ersten Dropdown-Menüs aktiviert oder deaktiviert.Auf diese Weise kann der Wert des ersten Dropdown-Menüs im Code ausgewählt werden (Laden der Benutzereinstellungen).

Mein Problem ist:

  1. Der Benutzer wählt im ersten Dropdown-Menü etwas aus.Das zweite Dropdown-Menü wird über JavaScript aktiviert.
  2. Anschließend ändern sie ein drittes Dropdown-Menü, das einen Beitrag zurück initiiert.Nach der Rücksendung befinden sich die Dropdown-Menüs im korrekten Zustand (erster Wert ausgewählt, zweites Dropdown-Menü aktiviert).
  3. Wenn sie dann auf die Schaltfläche „Zurück“ klicken, wird das zweite Dropdown-Menü nicht mehr aktiviert, obwohl dies der Fall sein sollte, da im ersten Dropdown-Menü etwas ausgewählt ist.

Ich habe versucht, ein Startskript hinzuzufügen (das den korrekten Status des zweiten Dropdown-Menüs festlegt). ClientScript.RegisterStartupScript, wenn dies jedoch aufgerufen wird, hat das erste Dropdown-Menü ein selectedIndex von 0, nicht das, was es tatsächlich ist.Ich vermute, dass der Wert der Auswahl nach meinem Startskript festgelegt wird (aber immer noch nicht aufgerufen wird). onChange Skript).

Irgendwelche Ideen, was man ausprobieren könnte?

War es hilfreich?

Lösung 

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void indexChanged(object sender, EventArgs e)
    {
        Label1.Text = " I did something! ";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
</head>
<body>
    <script type="text/javascript">
        function firstChanged() {
            if(document.getElementById("firstSelect").selectedIndex != 0)
                document.getElementById("secondSelect").disabled = false;
            else
                document.getElementById("secondSelect").disabled = true;
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <select id="firstSelect" onchange="firstChanged()">
            <option value="0"></option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select id="secondSelect" disabled="disabled">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>    
        </asp:DropDownList>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
    <script type="text/javascript">
        window.onload = function() {firstChanged();}
    </script>
</body>
</html>

Bearbeiten:Den gesamten Code ersetzt.Dies sollte auch in Ihrer Benutzersteuerung funktionieren.Ich glaube, dass Register.ClientScriptBlock nicht funktioniert, weil der Code, den Sie in diesen Block schreiben, ausgeführt wird Vor window.onload wird aufgerufen.Und ich gehe davon aus (ich bin mir in diesem Punkt nicht sicher), dass die Werte der DOM-Objekte zu diesem Zeitpunkt noch nicht festgelegt sind.Und deshalb erhalten Sie selectedIndex wie immer 0.

Andere Tipps

Wenn das zweite Dropdown-Menü anfänglich über Javascript aktiviert ist (ich gehe davon aus, dass dies während einer Javascript-Änderung geschieht, da Sie es nicht angegeben haben), wird es durch Klicken auf die Schaltfläche „Zurück“ zum erneuten Laden des vorherigen Postbacks nie aktiviert.

Das Mischen von ASP.NET mit klassischem Javascript kann schwierig sein.Vielleicht möchten Sie einen Blick auf die Ajax-Implementierung von ASP.NET werfen (oder auf das AjaxPanel-Steuerelement eines Drittanbieters, wenn Sie gezwungen sind, eine ältere ASP.NET-Version zu verwenden).Diese geben Ihnen durch reines C# das gewünschte Verhalten, ohne dass Sie auf Javascript-Hackery-Pokery zurückgreifen müssen.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top