Wie man HTML-Kombinationsfeld speichern Werte Hinzugefügt werden, indem Sie Benutzer in die textbox?

Ich habe eine combobox für eine web-Seite. Es braucht Werte, die vom Benutzer in das Textfeld & fügt diese zur Liste auf der Doppel-klicken Sie in der text-box. Ich möchte, um Benutzer eingegebenen Werte werden dauerhaft gespeichert, als option in der Liste. Wie kann ich es tun. Eine weitere Frage ist, wie kann ich die Anzahl der Optionen in der Liste, so dass ich fügen Sie ein element neben, der.
Hier ist mein code.

<html>
<head>
<script language="javascript">
function AddListItem(form)
{

var TestVar = form.txtInput.value;
form.txtInput.value = "";
form.select.options[3]=new Option(TestVar, TestVar, true);

}
</script>
<head>

<body>
<form id='Form1'>
<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="AddListItem(this.form)"/>
<p>
<select id='select'>
<option>abc</option>
<option>cde</option>
<option>efg</option>
</select>
</form>
</body>
</html>
InformationsquelleAutor XCeptable | 2010-10-15
  1. 0

    Endgültig hinzuzufügen, müssen Sie ein server-seitiges script.

    Vorübergehend hinzufügen, können Sie verwenden Sie javascript:

    function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

    Zum zählen der Anzahl der Optionen:

    function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

    (nur für konzeptuellen nutzen, nicht getestet, wie funktional)

    • Ich versuchte Ihren code, Steve, es funktionierte nicht,ich nahm es auf meine form. Hier ist, was ich Tat, " Funktion hinzufügen von Listenelementen(form) { var TestVar = form.txtInput.value; form.txtInput.Wert = ""; var sel = form.wählen Sie"; //var Anzahl = sel.Optionen.Länge; var opt = form.createElement("OPTION"); sel.addChildNode(opt); opt.innerHTML = TestVar; opt.Wert = TestVar; //form.wählen Sie.Optionen[count]=new Option(TestVar, TestVar, true); }" Was ich verstanden habe aus ur-code es schafft, die untergeordneten Knoten für eine Sitzung
    • Wenn ich es auf diese Weise, es funktioniert, aber alle neu hinzugefügten Optionen sind verschwunden, wenn die Seite aktualisiert wird. " Funktion hinzufügen von Listenelementen(form) { var Anzahl = form.wählen Sie.Optionen.Länge; var TestVar = form.txtInput.value; form.txtInput.Wert = ""; form.wählen Sie.Optionen[count]=new Option(TestVar, TestVar, true); } "
    • Kommentar 1 - nicht die Sitzung, die nur die aktuelle Instanz des Fensters. Kommentar 2 - Yep, das ist das vorübergehende Sache gegen Sie arbeiten. Siehe meine Antwort unten.
    InformationsquelleAutor Ben
  2. 0

    Fügen Sie eine <option> dynamisch wie diese:

    function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

    selectId ist die id des <select>, optText ist der text zur Anzeige in der dropdown-und optValue ist der Wert, der sich sumbitted an den server.

    Für Ihren code, nennen Sie es, wie

    <input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

    Wie Sie sehen, Sie nicht wirklich brauchen, um die Länge der Optionen, aber Sie kann über die options.length:

    document.getElementById(selectId).options.length;

    Sagte,

    1. Möchten Sie vielleicht hinzufügen
      dropdown, sowie für die übergabe an das
      server zum hinzufügen zu einer Tabelle, für
      Instanz. Haben Sie vielleicht zu tun, dass
      Aufruf über AJAX, wenn Sie es hinzufügen, um
      die dropdown -
    2. Hinzufügen des neuen Elements
      auf Doppel-Klick auf die textbox ist
      nicht sehr brauchbar. Auf blur könnte ein
      - option. Besser ist ein "Hinzufügen" - Taste, nachdem die
      textbox .
    • vielen Dank Nivas:-) ich habe es auf diese Weise vor der Verwendung von ur-code" - Funktion hinzufügen von Listenelementen(form) { var Anzahl = form.wählen Sie.Optionen.Länge; var TestVar = form.txtInput.value; form.txtInput.Wert = ""; form.wählen Sie.Optionen[count]=new Option(TestVar, TestVar, true); } "mein code verhält sich wie alle neu hinzugefügten Optionen sind deaktiviert auf "aktualisieren". Dann überprüfe ich mit urs jetzt & verhält es sich auch auf dieselbe Weise.Bec u Tat es mit 'createElement' so war ich denken, urs Optionen bleiben dürfen, zumindest für eine Sitzung.Ich bin versucht, es Schritt für Schritt tun. Nun ich brauche, um & render JSON-Daten aus php-server.
    InformationsquelleAutor Nivas
  3. 0

    Klingt wie Sie benötigen einen server-Seite Skript. Wenn Sie das Formular Absenden, können Sie ein Feld, das 'erinnern' alle dropdown-Optionen:

    Die vereinfachte HTML:

    <form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

    Vereinfachten PHP:

    <?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];

echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
  echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>

    Erklären: PHP speichert die ddOptions in der form -> Benutzer tritt das neue option -> Das Formular abgeschickt wird -> PHP findet die gespeicherten Werte -> PHP schiebt den neuen Wert -> PHP-Schleifen durch und erstellt die permanente dropdown-Menü.

    InformationsquelleAutor Ben
Schreibe einen Kommentar