Saludos, les comparto la forma que utilicé para agregar opciones a un select de forma dinámica en un formulario, es una mejor forma de agregar opciones sin tener que entrar a alguna sección de catálogos, seguramente la usaré más de una ocasión.
Primero tenemos que crear nuestro formulario
Para el ejemplo solamente es un select y un botón que abre un popup donde seleccionamos que es lo que queremos agregar al select (nombre del archivo index.php).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <title>agregar opciones a select</title> <script> var popup function abrir(){ popup = window.open("popup.php","popup","width=700,height=300,scrollbars=yes"); popup.focus(); } </script> </head> <body> Ejemplo para agregar opciones a select <form name="formulario_prueba"> <select name="nombre_select" id="nombre_select" class="form-control input-lg"> <option value="acaxao">acaxao</option> </select> <input type=button value="Agregar opciones" onClick="javascript:abrir()"> </form> </body> </html> |
En el popup tenemos lo siguiente (nombre de archivo popup.php)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<html> <head> <title>popup</title> <script> function agregaropciones(texto, valor){ var s=window.opener.document.formulario_prueba.nombre_select; //ponemos la referencia al select en una variable para no escribir tanto var option=window.opener.document.createElement("option");//creamos el elemento option.value=valor;//asignamos valores a sus parametros option.text=texto; s.appendChild(option);//insertamos el elemento s.value = valor; window.close() } </script> </head> <body> <h1>Opciones disponibles</h1> <form> Opción 1 <input type="Button" value="Opción 1" onclick="agregaropciones('Opcion 1','val1')"> <br> Opción 2 <input type="Button" value="Opción 2" onclick="agregaropciones('Opcion 2','val2')"> <br> Opción 3 <input type="Button" value="Opción 3" onclick="agregaropciones('Opcion 3','val3')"> <br> Opción 4 <input type="Button" value="Opción 4" onclick="agregaropciones('Opcion 4','val4')"> <br> Opción 5 <input type="Button" value="Opción 5" onclick="agregaropciones('Opcion 5','val5')"> <br> </form> </body> </html> |
Con lo anterior podemos tener una facilidad para el usuario, aplicable a diferentes situaciones
Espero la información les sea de utilidad, les dejo un demo y los archivos para descarga, saludos
Comments are closed, but trackbacks and pingbacks are open.