Wie man HTML-Combo-Box macht Werte speichern, indem Benutzer in Textbox hinzugefügt?

StackOverflow https://stackoverflow.com/questions/3940255

Frage

Ich habe eine Combobox für eine Webseite gemacht. Es nimmt Werte von Benutzern in Textfeld und fügt diejenigen zur Liste auf Doppelklick im Textfeld ein. Ich möchte Benutzer eingegebenen Werte dauerhaft gespeichert als Option in der Liste machen. Wie kann ich es tun. Eine weitere Frage ist, wie kann ich die Anzahl der Optionen in der Liste zählen, so dass ich ein Element hinzufügen neben dem. 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>
War es hilfreich?

Lösung

Um dauerhaft fügen Sie ein serverseitiges Skript benötigen.

Um vorübergehend fügen Sie Javascript verwenden können: 

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

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

Um die Anzahl der Optionen zählen: 

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

(nur für die konzeptionelle Nutzung, nicht als funktionelles getestet)

Andere Tipps

Sie haben einen <option> hinzufügen dynamisch wie folgt aus: 

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 von <select>, optText ist der Text in der Dropdown-Liste und optValue angezeigt werden soll, wird der Wert, der auf den Server sumbitted wird.

Für Ihren Code, nennen Sie es als 

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

Wie Sie sehen, die Sie nicht wirklich brauchen, um die Länge der Optionen zu finden, aber Sie können tun es über options.length: 

document.getElementById(selectId).options.length;

Wie gesagt,

  1. Sie könnten dies die hinzugefügt werden soll Dropdown-Liste sowie die passieren Server, bis zu einem gewissen Tabelle hinzuzufügen, für Beispiel. Vielleicht haben Sie zu tun haben, dass rufen Sie über AJAX, wenn Sie es hinzufügen die Drop-Down-
  2. Hinzufügen des neuen Artikel auf Doppelklick der Textbox ist nicht sehr brauchbar. Auf Unschärfe könnte eine sein Möglichkeit. Besser ist eine Schaltfläche ‚Hinzufügen‘, nachdem die Textbox.

Sounds wie Sie benötigen ein serverseitiges Skript dann. Wenn Sie das Formular abgesendet haben, können Sie ein Feld haben, die alle der Drop-Down-Optionen ist ‚Erinnerung‘:

Die vereinfachte HTML: 

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

Die vereinfachte 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>";
?>

Um zu erklären: PHP speichert die ddOptions in Form -> Benutzer tritt in eine neue Option -> Das Formular abgeschickt wird -> PHP findet die gespeicherten Werte -> PHP drückt auf den neuen Wert -> PHP Schleifen durch und erstellt Ihre permanente Dropdown Menü.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top