Comment faire zone de liste déroulante HTML sauvegarde des valeurs ajoutées par l'utilisateur en zone de texte?

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

Question

J'ai fait un combobox pour une page Web. Il prend des valeurs de l'utilisateur dans la boîte de texte et ajoute ceux à la liste double-cliquez dans la boîte de texte. Je veux faire des valeurs entrées utilisateur stockées de manière permanente en option dans la liste. Comment puis-je le faire. Une autre question est de savoir comment puis-je compter le nombre d'options dans la liste afin que j'ajouter un élément à côté de cela. Voici mon 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>
Était-ce utile?

La solution

Pour ajouter de façon permanente, vous avez besoin d'un script côté serveur.

Pour ajouter temporairement, vous pouvez utiliser javascript: 

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

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

Pour compter le nombre d'options: 

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

(uniquement pour une utilisation conceptuelle, non testé comme fonctionnel)

Autres conseils

Vous ajoutez un <option> dynamique comme ceci: 

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

selectId est l'id de <select>, optText le texte à afficher dans la liste déroulante et la valeur est optValue qui également être déposée au serveur.

Pour votre code, appelez comme 

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

Comme vous le voyez, vous n'avez pas vraiment besoin de trouver la longueur des options, mais vous peut le faire via options.length: 

document.getElementById(selectId).options.length;

Cela dit,

  1. Vous pouvez ajouter à la menu déroulant, ainsi que de passer à la serveur, à ajouter à une table, pour exemple. Vous pourriez avoir à faire appelez via AJAX, lorsque vous ajoutez à le menu déroulant
  2. Ajout du nouvel élément double clic de la zone de texte est pas très utilisable. Le flou pourrait être un option. Mieux est un bouton « Ajouter » après la zone de texte.

On dirait que vous avez besoin d'un script côté serveur, puis. Lorsque vous soumettez le formulaire, vous pouvez avoir un champ qui est « rappeler » toutes les options déroulantes:

Le code HTML simplifié: 

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

Le PHP simplifié: 

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

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

Pour expliquer: PHP enregistre les ddOptions sous la forme -> L'utilisateur entre nouvelle option -> Le formulaire est soumis -> PHP trouve les valeurs stockées -> PHP pousse sur la nouvelle valeur -> boucles PHP à travers et crée votre menu déroulant permanent menu.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top