Füllen Sie ein Textfeld aus einer DropDownList Auswahl ASP.NET/Javascript

Ich habe einen DDL-und ASP.NET Textbox. Ich möchte füllen Sie das Textfeld mit der option, die ich wählen Sie aus der DDL. Ich brauche diese zu einem Spontanzauber werden und nicht postbacks, so würde es scheinen, JavaScript wäre die offensichtliche Wahl hier. Ich habe getan, ein bisschen gesucht, aber alles was ich gefunden habe, scheint zu sein, für die der HTML-standard (Wählt und Eingänge) und diese nicht zu funktionieren scheinen mit ASP-Objekte:

<asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" DataTextField="FullName" />

<asp:TextBox runat="server" id="txtSalesPerson" />

Mein DDL ist bevölkert von SQL in der code-behind-Seite.

Kann jemand helfen mit dem entsprechenden code, den ich verwenden sollte? Danke.

InformationsquelleAutor James | 2011-02-07
  1. 1

    Wenn Sie JavaScript verwenden Sie die jQuery-Bibliothek (einfach Verweise auf die CDN gehosteten jQUery-Dateien auf google.com) und dann können Sie den folgenden code verwenden:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
    $("#DDLSalesPerson").change(function () {
        $("#txtSalesPerson").val($(this).val());
    });
</script>
    InformationsquelleAutor Scott
  2. 2

    ASP.Net Steuerelemente Rendern als standard-HTML-Elemente auf dem browser. Im Skript, können Sie eine Referenz, indem Sie die ClientID Eigenschaft des ASP.Net control.

    Setzen Sie diese in einem script-block in den aspx:

    var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

    Jetzt haben Sie Referenzen auf die DOM-Objekte für die select-und input-Elemente, die ASP.Net Steuerelemente gerendert, und Sie können die Techniken, die Sie schon auf der HTML-Elemente.

    Zusätzliche info
    Sie müssen zum hinzufügen einer onchange-Attribut auf Ihre DropDownList-Steuerelement als solche:

    <asp:DropDownList runat="server" ID="DDLSalesPerson" DataValueField="keyid" onchange="ddlChange();" DataTextField="FullName" />

    und setzen Sie dann das Skript-block in Ihrer aspx -

    <script type="text/javascript">

    function ddlChange()
    {
        var ddl = document.getElementById('<%=DDLSalesPerson.ClientID %>');
        var textBox = document.getElementById('<%= txtSalesPerson.ClientID%>');

        textBox.value = ddl.options[ddl.selectedIndex].text;
    }

</script>

    So ändern Sie die dropdown-Liste, du wirst sehen, das Textfeld zu aktualisieren. Getestet in IE und Chrome.

    InformationsquelleAutor Matthew
  3. 2

    Da du betonst, dass du ein JavaScript-Anfänger, darf ich Ihnen empfehlen, ein updatepanel-Steuerelement verwenden. Ein updatepanel-ermöglicht die Ausführung von server-code, ohne die Seite aktualisieren. Legen Sie einfach die dropdownList und die textbox in der gleichen updatepanel-oder in zwei separaten updatepanels und schreiben Sie den code für die textbox zu aktualisieren, basierend auf der dropdownlist Auswahl. Stellen Sie sicher, dass die dropdownlist zu tun autopostback.
    Die asp-Syntax ist wie folgt:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlList" runat="server" 
        AutoPostBack="True">
        <asp:ListItem>-select-</asp:ListItem>
        <asp:ListItem>option 1</asp:ListItem>
        <asp:ListItem>option 2</asp:ListItem>
    </asp:DropDownList>
<asp:TextBox ID="txtTextBox" runat="server" />

</ContentTemplate> 
</asp:UpdatePanel>

    Codebehind in vb ist wie folgt:

     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If ddlList.Text <> "-select-" then
           txtTextBox.Text = ddlList.text
        End If
    End Sub
    InformationsquelleAutor boruchsiper
Schreibe einen Kommentar