none
Vorhandene Dropdownliste füllen durch JQuery ? RRS feed

  • Frage

  • Hallo, ich habe 2 Dropdownlisten auf meiner ASP.NET Seite. Die eine wird in einem JQuery UI Dialog angezeigt.Wenn ich hier nun was auswähle, soll diese Auswahl in der ersten Box zur Auswahl eingefügt werden. Alles ohne die Seite neun zu laden!

    Könnt ihr mir weiterhelfen?

    Donnerstag, 16. Januar 2014 20:12

Antworten

  • Hallo Michael,

    das geht recht einfach:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Listbox Test</title>
    
        <!-- jQuery includes //-->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        function addOption()
        {
            /* Aus Liste 1 entfernen und in Liste 2 einfügen */
            if( $( "#Select1" ).val() != "" ) {
                $( "#Select1 > option:selected" ).each( function () {
                    $( this ).remove().appendTo( "#Select2" );
                });
            }
    
            /* In Liste 2 einfügen aber in Liste 1 belassen */
            if( $( "#Select1" ).val() != "" ) {
                $( "#Select1 > option:selected" ).each( function () {
                    $( "#Select2" ).append( $('<option></option>').val( $( this ).val() ).text( $( this ).text() ) )
                });
            }
        }
        </script>
    </head>
    <body>
    
    <select id="Select1" size="1" onchange="addOption();">
        <option value="">--Bitte auswählen--</option>
        <option value="Wert 1">Text 1</option>
        <option value="Wert 2">Text 2</option>
        <option value="Wert 3">Text 3</option>
        <option value="Wert 4">Text 4</option>
    </select>
    
    <select id="Select2" size="1">
        <option value="Wert A">Text A</option>
        <option value="Wert B">Text B</option>
    </select>
    
    </body>
    </html>
    
    Von den beiden Methoden solltest Du eine auskommentieren, was die jeweilige Methode tut, steht ja als Kommentar im Code.

    HTH


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Donnerstag, 16. Januar 2014 21:28
    Moderator

Alle Antworten

  • Hallo Michael,

    das geht recht einfach:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Listbox Test</title>
    
        <!-- jQuery includes //-->
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        function addOption()
        {
            /* Aus Liste 1 entfernen und in Liste 2 einfügen */
            if( $( "#Select1" ).val() != "" ) {
                $( "#Select1 > option:selected" ).each( function () {
                    $( this ).remove().appendTo( "#Select2" );
                });
            }
    
            /* In Liste 2 einfügen aber in Liste 1 belassen */
            if( $( "#Select1" ).val() != "" ) {
                $( "#Select1 > option:selected" ).each( function () {
                    $( "#Select2" ).append( $('<option></option>').val( $( this ).val() ).text( $( this ).text() ) )
                });
            }
        }
        </script>
    </head>
    <body>
    
    <select id="Select1" size="1" onchange="addOption();">
        <option value="">--Bitte auswählen--</option>
        <option value="Wert 1">Text 1</option>
        <option value="Wert 2">Text 2</option>
        <option value="Wert 3">Text 3</option>
        <option value="Wert 4">Text 4</option>
    </select>
    
    <select id="Select2" size="1">
        <option value="Wert A">Text A</option>
        <option value="Wert B">Text B</option>
    </select>
    
    </body>
    </html>
    
    Von den beiden Methoden solltest Du eine auskommentieren, was die jeweilige Methode tut, steht ja als Kommentar im Code.

    HTH


    Gruß, Stefan
    Microsoft MVP - Visual Developer ASP/ASP.NET
    http://www.asp-solutions.de/ - Consulting, Development
    http://www.aspnetzone.de/ - ASP.NET Zone, die ASP.NET Community

    Donnerstag, 16. Januar 2014 21:28
    Moderator