locked
Text Kombinationsfeld RRS feed

  • Frage

  • Ich möchte ein Kombinationsfeld in html einzuführen.
    In diesem Fall wollte ich die Möglichkeit haben, zu schreiben oder Text löschen.

    Was ist der Code, den Sie dies tun können?
    Dienstag, 21. Februar 2017 01:01

Antworten

  • Hallo Vitor,

    damit wir nicht bei den komplexen Themen an Sprachschwierigkeiten scheitern, vorab die Frage: Sprichst/schreibst Du auch Englisch? Falls ja, wäre es evtl. sinnvoller, im englischsprachigen Forum (spanische, portugiesische, ... Foren gibt es wohl auch aber da müsstest Du selbst mal schauen) zu fragen.

    Dann zurück zu deinen Fragen.

    Man kann zwar schon rein per HTML/Javascript sowas machen wie Du es in deiner Grafik aufzeigst, allerdings musst Du dir natürlich auch Gedanken darüber machen, wo Du die veränderten Daten dauerhaft speichern willst. Denn beim nächsten Aufruf der HTML Seite wären alle temprorären Änderungen wieder verschwunden.

    Es gibt viele verschiedene Möglichkeiten, Daten dauerhaft zu speichern. Im localStorage eines Browsers, im Dateisystem, in einer Datenbank, Excel, CSV, über einen Webservice, usw. usw.

    Für das, was Du machen möchtest (Daten aus einer Textbox in eine Listbox übernehmen bzw. wieder entfernen), gibt es bereits verschiedene Beispiele. Hier mal ein stark vereinfachtest unter Verwendung von jQuery (solltest Du auf jeden Fall nutzen)

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
        function AddValue() {
    
        var valueToAdd = $( "#Textbox" ).val();
    
            $( "#Listbox" ).append( '<option value="' + valueToAdd + '">' + valueToAdd + '</option>' );
        }
    
        function RemoveValue() {
    
        var valueToRemove = $( "#Textbox" ).val();
    
            $( "#Listbox option[value='" + valueToRemove + "']" ).remove();
        }
        </script>
    </head>
    <body>
    
    <input id="Textbox" type="text" />
    <br />
    <input id="Add" type="button" value="Hinzufügen" onclick="AddValue();" />
    <input id="Remove" type="button" value="Entfernen" onclick="RemoveValue();" />
    
    <br /><br />
    
    <select id="Listbox" size="1" style="width: 200px;">
        <option value="">--bitte auswählen--</option>
        <option value="Abc">Abc</option>
        <option value="Def">Def</option>
    </select>
    
    </body>
    </html>


    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

    • Als Antwort vorgeschlagen Stefan Falz Donnerstag, 2. März 2017 00:27
    • Als Antwort markiert Vitor Patrício Donnerstag, 2. März 2017 23:39
    Mittwoch, 22. Februar 2017 09:21
  • Hallo Vitor,

    das geht dann mit folgendem Code:

    function RemoveSelectedValue() {
        $( "#Listbox option:selected" ).remove();
    }

    <input id="RemoveSelected" type="button" value="Ausgewähltes Element entfernen" onclick="RemoveSelectedValue();" />

    Ich habe das Beispiel auf meinem Server aktualisiert, dort ist das eingebunden.



    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


    • Bearbeitet Stefan Falz Mittwoch, 1. März 2017 10:17
    • Als Antwort vorgeschlagen Stefan Falz Donnerstag, 2. März 2017 00:27
    • Als Antwort markiert Vitor Patrício Donnerstag, 2. März 2017 23:40
    Mittwoch, 1. März 2017 10:17

Alle Antworten

  • Hallo Vitor,

    es gibt in HTML kein direktes Kombinationsfeld. Falls es dir ausreicht, ein Eingabefeld mit einer dazugehörigen Datenliste zu haben, kannst Du rein mit HTML5 arbeiten, solange es dich nicht stört, dass manche ewiggestrigen Browser das nicht kennen.

    <input type="text" name="deinFeld" list="deineListe">
    <datalist id="deineListe">
        <option value="Abc">
        <option value="Def">
    </datalist>

    Wenn Du es hübscher gestalten willst (also wie eine Listbox mit einem Aufklapppfeil, usw.) wirst Du CSS und ggfs. auch Javascript müssen. jQuery UI hat sowas:

      https://jqueryui.com/autocomplete/#combobox

    Wenn Du was anderes meintest, müsstest Du uns aber mal genauer darlegen, was Du in welcher Form wie machen möchtest.



    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

    Dienstag, 21. Februar 2017 07:53
  • hallo,

    Ich lerne jetzt HTML oder Java-Skript.
    Ich sehe, dass ist eine weit verbreitete Sprache.
    Dieses Projekt wird die Art Datenbank sein, in dem viele Zugriff haben. Es wird für eine Non-Profit-Organisation, Studium der Vögel sein.

    Senden Bild, so dass Sie verstehen können.

    Wird Textfeld auf eine Schaltfläche, um die geschriebenen Text speichern und eine andere zu beseitigen.

    All dieser Text wird angezeigt und automatisch in das Kombinationsfeld aktualisiert.

    Bitte können Sie mir helfen diesen Code zu schreiben?

    Gruß

    Patrício

    Dienstag, 21. Februar 2017 22:46
  • Hallo Vitor,

    damit wir nicht bei den komplexen Themen an Sprachschwierigkeiten scheitern, vorab die Frage: Sprichst/schreibst Du auch Englisch? Falls ja, wäre es evtl. sinnvoller, im englischsprachigen Forum (spanische, portugiesische, ... Foren gibt es wohl auch aber da müsstest Du selbst mal schauen) zu fragen.

    Dann zurück zu deinen Fragen.

    Man kann zwar schon rein per HTML/Javascript sowas machen wie Du es in deiner Grafik aufzeigst, allerdings musst Du dir natürlich auch Gedanken darüber machen, wo Du die veränderten Daten dauerhaft speichern willst. Denn beim nächsten Aufruf der HTML Seite wären alle temprorären Änderungen wieder verschwunden.

    Es gibt viele verschiedene Möglichkeiten, Daten dauerhaft zu speichern. Im localStorage eines Browsers, im Dateisystem, in einer Datenbank, Excel, CSV, über einen Webservice, usw. usw.

    Für das, was Du machen möchtest (Daten aus einer Textbox in eine Listbox übernehmen bzw. wieder entfernen), gibt es bereits verschiedene Beispiele. Hier mal ein stark vereinfachtest unter Verwendung von jQuery (solltest Du auf jeden Fall nutzen)

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <script type="text/javascript">
        function AddValue() {
    
        var valueToAdd = $( "#Textbox" ).val();
    
            $( "#Listbox" ).append( '<option value="' + valueToAdd + '">' + valueToAdd + '</option>' );
        }
    
        function RemoveValue() {
    
        var valueToRemove = $( "#Textbox" ).val();
    
            $( "#Listbox option[value='" + valueToRemove + "']" ).remove();
        }
        </script>
    </head>
    <body>
    
    <input id="Textbox" type="text" />
    <br />
    <input id="Add" type="button" value="Hinzufügen" onclick="AddValue();" />
    <input id="Remove" type="button" value="Entfernen" onclick="RemoveValue();" />
    
    <br /><br />
    
    <select id="Listbox" size="1" style="width: 200px;">
        <option value="">--bitte auswählen--</option>
        <option value="Abc">Abc</option>
        <option value="Def">Def</option>
    </select>
    
    </body>
    </html>


    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

    • Als Antwort vorgeschlagen Stefan Falz Donnerstag, 2. März 2017 00:27
    • Als Antwort markiert Vitor Patrício Donnerstag, 2. März 2017 23:39
    Mittwoch, 22. Februar 2017 09:21
  • hallo Freund

    Schon jetzt vielen Dank für Ihre Aufmerksamkeit.

    Dies ist in der Nähe. Nur ist es nicht den geschriebenen Text aufzunehmen.

    Wie kann ich es tun?

    Obwohl ich im Forum portugiesisch schreiben, spanisch .... Ich habe einige Antworten. So ist Ihre Aufmerksamkeit von entscheidender Bedeutung. Erhielt.

    Gruß
    Mittwoch, 22. Februar 2017 23:32
  • Hallo Vitor,

    so wirklich habe ich deine letzte Antwort leider nicht verstanden.

    Falls Du mit "Nur ist es nicht den geschriebenen Text aufzunehmen" meintest, dass das Beispiel den Text aus der Textbox nicht in die Listbox überträgt: Doch, genau das macht der Button "Hinzufügen".

    Anonsten weiß ich leider nicht, was Du meinst.


    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, 23. Februar 2017 00:36

  • hallo,

    Ich kopierte seinen letzten Code Editor und gespeichert in html. Aber die Öffnung schließt nicht den Text des Textfeld Kombinationsfeld.

    Testen Sie sich selbst. Erhielt.

    Gruß
    Montag, 27. Februar 2017 00:36
  • Montag, 27. Februar 2017 00:38
  • Hallo Vitor,

    wie ich oben schrieb, musst Du für dieses Beispiel noch jQuery mit einbinden. Ich hatte hier

      jQuery v3.1.1

    verwendet. Bitte leg diese Datei im selben Verzeichnis ab wie die htm Datei. (Diese sollte zudem als UTF-8 gespeichert werden, dann sind auch die Umlaute/Sonderzeichen nicht kaputt)


    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

    Montag, 27. Februar 2017 09:26
  • Hallo, Freund

    Vielen Dank für Ihre Aufmerksamkeit und Geduld.
    Ich habe versucht zu tun, was Sie sagen, aber leider konnte es nicht.

    Werde ich ein Video zu zeigen, wie kann ich das tun?

     Gruß
    Montag, 27. Februar 2017 23:57
  • Hallo Vitor,

    wahrscheinlich liegt es an deinem Aufruf der Datei im lokalen Dateisystem (X:\Ordner\Datei.htm) und den daraus resultierenden Berechtigungsproblemen.

    Probier mal bitte, die Datei auf einem Webserver aufzurufen, also bspw. http://deinserver/datei.htm. Für einen ersten Test habe ich die die Dateien mal auf einem Testserver von mir abgelegt.

      http://demo.sfwnet.de/MSDN/Listbox/Listbox.htm

    Dort sieht das dann bspw. so aus:


    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

    Dienstag, 28. Februar 2017 07:25
  • Hallo
    Freund, ich beginne zu verstehen.
    Erhielt.
    Ich hatte diese Zeilen Code das Kombinationsfeld zu reinig zu nehmen:

    <option value="">--bitte auswählen--</option>
        <option value="Abc">Abc</option>
        <option value="Def">Def</option>

    Jetzt möchte ich die Schaltfläche Entfernen eins nach dem anderen zu entfernen, was Sie wollen.

    Wie kann ich? Welcher Code?

    Gruß

    Dienstag, 28. Februar 2017 23:05
  • Hallo Vitor,

    willst Du immer das selektierte Element löschen? Oder irgendein beliebiges? Oder das letzte in der Liste?

    Der Code in meinem Beispiel würde das Element löschen, dass als value dem Text in der Textbox entspricht.


    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

    Dienstag, 28. Februar 2017 23:21
  • Hallo, mein Freund. Ich will nur das ausgewählte Element zu löschen. Gruß
    Mittwoch, 1. März 2017 10:12
  • Hallo Vitor,

    das geht dann mit folgendem Code:

    function RemoveSelectedValue() {
        $( "#Listbox option:selected" ).remove();
    }

    <input id="RemoveSelected" type="button" value="Ausgewähltes Element entfernen" onclick="RemoveSelectedValue();" />

    Ich habe das Beispiel auf meinem Server aktualisiert, dort ist das eingebunden.



    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


    • Bearbeitet Stefan Falz Mittwoch, 1. März 2017 10:17
    • Als Antwort vorgeschlagen Stefan Falz Donnerstag, 2. März 2017 00:27
    • Als Antwort markiert Vitor Patrício Donnerstag, 2. März 2017 23:40
    Mittwoch, 1. März 2017 10:17
  • hallo Freund
    Ich versuchte, den letzteren Code zu setzen, unter anderem.
    Bitte testen.
    Wenn Sie das Fenster schließen, verliere ich alle Informationen in der Auswahlbox.
    Was kann falsch sein?

    <html xmlns="http://www.w3.org/1999/xhtml"><head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <style type="text/css">
        .DropListe
        {
            font-family : Verdana;
            border      : 1px solid #000000;
            border-style: dashed;
            border-color: Red;
        }
        </style>
        
        <script type="text/javascript">
    function RemoveSelectedValue() {
        $( "#Listbox option:selected" ).remove();
    }
    
        
    function AddValue() {
    
        var valueToAdd = $( "#Textbox" ).val();
    
            $( "#Listbox" ).append( '<option value="' + valueToAdd + '">' + valueToAdd + '</option>' );
        }
        
    function RemoveValue() {
    
        var valueToRemove = $( "#Textbox" ).val();
    
            $( "#Listbox option[value='" + valueToRemove + "']" ).remove();
        }
        </script>
    </head>
    <body>
    
    <input id="Textbox" type="text">
    <br>
    <input id="Add" type="button" value="Hinzufügen" onclick="AddValue();">
    <input id="RemoveSelected" type="button" value="Ausgewähltes Element entfernen" onclick="RemoveSelectedValue();" />
    
    <br><br>
    
    <select id="Listbox" size="1" style="width: 200px;">
    <option value=""></option><option value=""></option></select>    
        
       </body></html>


    Gruß

    Mittwoch, 1. März 2017 23:43

  • hallo Freund

    Als intersperse letztere Code, auf der anderen Seite, so dass beim Programm zu schließen, ist es nicht Daten verlieren Sie eingeben, aber die Wache?

    Gruß
    Mittwoch, 1. März 2017 23:56
  • Hallo Vitor,

    natürlich sind die Daten beim schließen des Browsers weg. Sie werden ja auch nirgendwo gespeichert außer im Browserfenster selbst.

    Wenn Du diese Daten dauerhaft speichern willst, müsstest Du uns verraten, welche Projektart Du erstellst und falls es ein Webprojekt ist, welche serverseitige Technologie Du einsetzen willst.

    Das wäre aber eine komplett andere Frage, daher wäre es sinnvoll, wenn Du diesen Thread abschließen und die neue Frage in einem neuen Thread stellen würdest. "Abschließen" kannst Du diesen Thread, indem Du die hilfreichsten Postings mit "Abstimmen" bewertest und die Postings, die die Antworten auf deine ursprüngliche Frage enthalten, mit "Als Antwort markieren" versiehst.


    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, 2. März 2017 00:25
  • Hallo Freund,

    Wird kann mich in diesem Thema helfen:

    speichern Kombinationsfeld Daten

    https://social.msdn.microsoft.com/Forums/pt-BR/84627c1a-47e3-4527-9d9e-3a41194cb166/speichern-kombinationsfeld-daten?forum=iotdevicemanagementde

    Dankbar für die Hilfe.

    Grüße,

    Patricio



    Sonntag, 5. März 2017 00:17