Como hacer cuadro combinado HTML Guardar valores añadidos por el usuario en el cuadro de texto?

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

Pregunta

He hecho un cuadro combinado para una página web. Toma valores de usuario en el cuadro de texto y añade a la lista de aquellos con doble click en el cuadro de texto. Quiero hacer que los valores introducidos por el usuario almacenados de forma permanente como opción en la lista. Cómo puedo hacerlo. Una pregunta más es cómo puedo contar el número de opciones en la lista de modo que puedo añadir un elemento al lado de eso. Aquí está mi código. 

<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>
¿Fue útil?

Solución

Para añadir de forma permanente necesita un script del lado del servidor.

Para añadir temporalmente se puede usar javascript: 

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

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

Para contar el número de opciones: 

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

(sólo para uso conceptual, no probado como funcional)

Otros consejos

Se agrega una <option> dinámicamente como esto: 

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

selectId es el ID del <select>, optText es el texto que se mostrará en el menú desplegable y optValue es el valor que se sumbitted al servidor.

Para obtener su código, como lo llaman 

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

Como se ve, usted realmente no necesita para encontrar la longitud de las opciones, pero puede hacerlo a través de options.length: 

document.getElementById(selectId).options.length;

Una vez dicho esto,

  1. Es posible que desee añadir esto a la desplegable, así como para pasar a la servidor, para añadir a alguna mesa, por ejemplo. Es posible que tenga que hacer eso llama a través de AJAX, cuando se agrega a el menú desplegable
  2. La adición del nuevo elemento haga doble clic en el cuadro de texto es de No muy usable. Por falta de definición podría ser una opción. Mejor es un botón de 'Agregar' después de la cuadro de texto.

Parece que usted necesita un script del lado del servidor, a continuación. Cuando envíe el formulario, puede tener un campo que está 'recordar' todas las opciones desplegables:

El HTML simplificada: 

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

El PHP simplificado: 

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

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

Para explicar: PHP guarda los ddOptions en forma -> El usuario introduce la nueva opción -> se envía el formulario -> PHP encuentra los valores almacenados -> empujones PHP en el nuevo valor -> bucles PHP a través y crea su desplegable permanente menú.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top