Wie kann ich eine editierbare Dropdown-Liste in HTML erstellen?

Ich möchte ein Textfeld mit einer dropdown-Liste, über die der Benutzer wählen Sie einige vordefinierte Werte. Der Benutzer sollte auch in der Lage sein, um geben Sie einen neuen Wert ein oder wählen Sie eine vordefinierte man aus einer dropdown-Liste. Ich weiß, dass ich zwei widgets für die, aber in meiner app wäre es mehr ergonomnic, wenn es vereint war, in einem widget.

Gibt es ein standard-widget oder muss ich über einen Dritten javascript?

Wie etwa browser-Portabilität?

InformationsquelleAutor der Frage | 2008-11-05

15

Der beste Weg, dies zu tun, ist wahrscheinlich die Verwendung einer Drittanbieter-Bibliothek.

Gibt es eine Umsetzung dessen, was Sie suchen, in jQuery UI und in dojo. jQuery wird immer beliebter, aber dojo können Sie deklarativ definieren, widgets in HTML, das klingt eher wie das, was Sie suchen.

Welche Sie verwenden, hängt von Ihrem Stil, aber beide sind entwickelt für cross-browser arbeiten, und beide werden häufiger aktualisiert werden als kopieren und einfügen von code.

InformationsquelleAutor der Antwort Dan Monego

Können Sie dies mithilfe der <datalist> - tag in HTML5.

<input type="text" name="product" list="productName"/>
<datalist id="productName">
    <option value="Pen">Pen</option>
    <option value="Pencil">Pencil</option>
    <option value="Paper">Paper</option>
</datalist>

Wenn Sie doppelklicken Sie auf die Eingabe von text im browser eine Liste mit der angegebenen option angezeigt wird.

InformationsquelleAutor der Antwort Alexandru Boerescu

8

Den <select> tag erlaubt nur die Verwendung von vordefinierten Einträgen. Die typische Lösung für Ihr problem ist ein Eintrag mit der Bezeichnung "Andere" und einem deaktivierten Eingabefeld (<input type="text"). Fügen Sie einige JavaScript-zum aktivieren des edit-Feld nur, wenn "Andere" ausgewählt ist.

Kann es möglich sein, irgendwie erstellen Sie eine dropdown-Liste, ermöglicht die direkte Bearbeitung, aber IMO nicht der Mühe Wert. Wenn Sie es war, Amazon, Google oder Microsoft würde es tun 😉 Nur die Arbeit zu erhalten erledigt mit der am wenigsten komplizierte Lösung. Als schneller (Ihr Chef kann wie, die) und in der Regel leichter zu pflegen (können wie die).

InformationsquelleAutor der Antwort Treb

Sehr einfache Implementierung (nur Basisfunktionen), basierend auf CSS und eine Zeile JS-code

<div class="dropdown">
    <input type="text" />
    <select  onchange="this.previousElementSibling.value=this.value; this.previousElementSibling.focus()">
        <option>This is option 1</option>
        <option>Option 2</option>
    </select>
</div>

Bitte beachten Sie: es nutzt previousElementSibling nicht unterstützt in älteren Browsern (unter IE9)

.dropdown {
    position: relative;
    width: 200px;
}
.dropdown select
{
    width: 100%;
}
.dropdown > * {
    box-sizing: border-box;
    height: 1.5em;
}
.dropdown select {
}
.dropdown input {
    position: absolute;
    width: calc(100% - 20px);
}

Hier ist er
JSFiddle

InformationsquelleAutor der Antwort Max

2

ComboBox mit TextBox (Für die vordefinierten Werte als auch Benutzer-definierte Werte.)

ComboBox mit Textfeld (Hier Klicken)

InformationsquelleAutor der Antwort Lakshmana Kumar D
1

Ich bin nicht sicher, es ist ein Weg, um es automatisch zu tun, ohne javascript.

Was Sie brauchen, ist etwas, das läuft auf der browser-Seite, um das Formular Absenden an den server zurück, wenn Sie Benutzer eine Auswahl vornimmt, also javascript.

Stellen Sie außerdem sicher, Sie haben eine andere Methode (z.B. ein submit-button) für diejenigen, die javascript ausgeschaltet haben.

Ein gutes Beispiel: Combo-Box-Viewer

Hatte ich sogar eine mehr anspruchsvolle combo-box von gestern, mit diesem dhtmlxCombo , die mit ajax zum abrufen von relevanten Werte unter der großen Menge von Daten.

InformationsquelleAutor der Antwort VonC
1

Einer combobox ist leider etwas, das übrig war, aus den HTML-Spezifikationen.

Der einzige Weg, um es zu verwalten, eher leider, ist Rollen Sie Ihre eigenen oder verwenden Sie einen pre-built. Diese eine Recht einfach aussieht. Ich benutze diese eine für ein open-source-app, die zwar leider müssen Sie zahlen für die kommerzielle Nutzung.

InformationsquelleAutor der Antwort

Ein wenig CSS und fertig
fiddle

<div style="position: absolute;top: 32px; left: 430px;" id="outerFilterDiv">
<input name="filterTextField" type="text" id="filterTextField" tabindex="2"  style="width: 140px;
    position: absolute; top: 1px; left: 1px; z-index: 2;border:none;" />
        <div style="position: absolute;" id="filterDropdownDiv">
<select name="filterDropDown" id="filterDropDown" tabindex="1000"
    onchange="DropDownTextToBox(this,'filterTextField');" style="position: absolute;
    top: 0px; left: 0px; z-index: 1; width: 165px;">
    <option value="-1" selected="selected" disabled="disabled">-- Select Column Name --</option>
</select>

InformationsquelleAutor der Antwort atom217

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.