Foros del Web » Programando para Internet » Javascript »

Llenar select con Array

Estas en el tema de Llenar select con Array en el foro de Javascript en Foros del Web. Hola, necesito llenar 2 select con datos que contenga un array y a la vez dependiendo el dato que se seleccione en el select 1 ...
  #1 (permalink)  
Antiguo 18/01/2016, 07:04
 
Fecha de Ingreso: enero-2016
Mensajes: 5
Antigüedad: 8 años, 3 meses
Puntos: 0
Llenar select con Array

Hola,
necesito llenar 2 select con datos que contenga un array y a la vez dependiendo el dato que se seleccione en el select 1 no mostrar el valor seleccionado en el select 2.

me explico, tengo un array

var pisos = new Array ("piso 1", "piso 2", "piso 3");

el cual me rellene 2 select
<select class="form-control" id="slelect 1" value="" name="slelect 1" >
<select class="form-control" id="slelect 2" value="" name="slelect 2" >

si selecciono piso 1 en el select 1, en el select 2 no me muestra el piso 1 ya que se selecciono en el select 1
  #2 (permalink)  
Antiguo 18/01/2016, 08:05
 
Fecha de Ingreso: junio-2011
Mensajes: 289
Antigüedad: 12 años, 10 meses
Puntos: 15
Respuesta: Llenar select con Array

Hola que tal??

Te dejo un código espero te sirva


Código HTML:
Ver original
  1. <div id="div1">
  2. <select id="consola"><option></option></select>
  3. </div>


Código Javascript:
Ver original
  1. var consolas = new Array ("Seleccione una Opción...","Playstation", "XBOX", "Wii");
  2. window.onload = cargarSelect();
  3.  
  4. function cargarSelect() {
  5.            //Carga tus select
  6.             var consola = document.getElementById("consola");
  7.             for (var i = 0; i < consolas.length; i++) {
  8.                 consola.options[i] = new Option (consolas[i],i);
  9.             }
  10. }
  11.   //Evento cuando se cambia valor de select 1      
  12.  $( "#consola" ).change(function() {
  13.   var optionSelected = $(this).find("option:selected");
  14.      var valueSelected  = optionSelected.val();
  15.      var textSelected   = optionSelected.text();
  16.     alert('Texto: '+textSelected + ' Valor: ' + valueSelected);
  17. });
  #3 (permalink)  
Antiguo 18/01/2016, 11:41
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: Llenar select con Array

Bienvenido a Foros del Web.

Como supongo que cuando se elija una segunda opción querrás que la que previamente fue retirada del otro combo retorno al mismo, tendrías que ejecutar un ciclo en el cual recorrerías el array y solo tomarías a los valores que sean distintos al seleccionado en el combo en el cual se produjo el cambio de opción. Y como sería lo mismo para el otro combo, lo conveniente es utilizar una función.

Un ejemplo:
Código HTML:
Ver original
  1. <select id="a"></select>
  2. <select id="b"></select>

Código Javascript:
Ver original
  1. var o = ["foo", "bar", "bin", "baz"], a, b, op, po, fn = function(s, v){
  2.     s.innerHTML = "";
  3.     for (var i in o){
  4.         if (o[i] != v){
  5.             op = document.createElement("option");
  6.             op.value = o[i];
  7.             op.text = o[i];
  8.             s.add(op);
  9.         }
  10.     }
  11. };
  12.  
  13. //Al terminar de cargar los elementos de la página
  14. document.addEventListener("DOMContentLoaded", function(){
  15.     a = document.querySelector("#a");
  16.     b = document.querySelector("#b");
  17.  
  18.     //Llenamos ambos combos
  19.     for (var i in o){
  20.         op = document.createElement("option");
  21.         op.value = o[i];
  22.         op.text = o[i];
  23.         po = op.cloneNode(true); //Clonamos a la opción previamente creada
  24.         a.add(op);
  25.         b.add(po);
  26.     }
  27.  
  28.     a.addEventListener("change", function(){
  29.         fn(b, this.value);
  30.     }, false);
  31.     b.addEventListener("change", function(){
  32.         fn(a, this.value);
  33.     }, false);
  34. }, false);

Cuando se elija una opción en cualquiera de ambos combos, se enviará como argumentos de la función al otro combo y el valor del combo actual. En la función, limpias al otro combo, recorres la lista de opciones y en cada iteración verificas que el valor actual en el bucle es diferente al valor seleccionado en el combo actual; de ser así, creas la opción, le asignas el valor y texto y la adhieres al otro combo.

DEMO

Un saludo
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Etiquetas: select, valor
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:30.