Consulta...Muestre un select dependiente de otro select

[hoberwilly]

Hola amigos, tengo la siguiente consulta a realizar:
1. Tengo un select rp:

<select name="tipo_doc" id="tipo_doc">
<option selected="selected">Elige</option>
<option>DNI</option>
<option>Carnet de Extranjería</option>
</select>

2. Y en otro select muestro segun lo enviado por el anterior, de la sgte manera:

2.1. Si seleccione DNI me mostrara en select II:

<select name="select ii">
<option selected="selected">Elige</option>
<option>Soles</option>
<option>Dolares</option>
</select>

2.2. Pero si seleccione Carnet de extranjeria me mostrara en el mismo select II:

<select name="select ii">
<option selected="selected">Elige</option>
<option>Dolares</option>
<option>Euros</option>
<option>Pesos</option>
</select>

Agradesco de antemano sus colaboraciones, me despido


Willy S.

[ceSharp]

hola hoberwilly,

puedes añadir options a tu select de esta manera:

tu_select.options[tu_select.length] = new Option(texto,valor);

donde tu_select es tu objeto select, texto será un string con el texto que aparezca en el select y valor es el value que quieras dar a tu option del select.

Para quitar options de tu select puedes hacer esto otro:

for(var iItem=0;iItem<el_select.options.length;iItem++)
{
el_select.options[iItem] = null;
iItem--;
}
De esta manera eliminas todos los options de tu select. Ya sabiendo esto puedes ejecutar funciones de añadido y eliminación de options en función de la opción que haya seleccionado el usuario.

salu2

[ceSharp]

otra cosa que me había olvidado de comentarte,

otra opción tal vez un tanto más 'cutre' pero efectiva es crearte dos select; uno con el option 'Euro' y otro sin él. En función de lo que seleccione el usuario puedes mostrar uno u otro (utilizando display:none/inline), sin necesidad de añadir o quitar elementos al select.

como quieras...

salu2

[crujikoki]

Hola,

También podrías tener los dos selects construidos y hacer uno u otro visible segun te convenga... Quizás te parece cutre, pero te ahorras el tener que montar y desmontar los selects.

Saludos.

[hoberwilly]

Hola amigos, gracias por sus sugerencias...estoy tratando de documentarme un poco mas pero no encuentro algo similar para mi caso.

Esto es lo que avanze:
1. Opte por tener dos selects II-A y II-B

<select name="select II-A" style="visibility:hidden">
<option selected="selected">Elige</option>
<option>Soles</option>
<option>Dolares</option>
</select>

<select name="select II-B" style="visibility:hidden">
<option selected="selected">Elige</option>
<option>Dolares</option>
<option>Euros</option>
<option>Pesos</option>
</select>

2. Pero lo que no la doy es como implementarlo al primer select:

<select name="tipo_doc" id="tipo_doc">
<option selected="selected">Elige</option>
<option>DNI</option>
<option>Carnet de Extranjería</option>
</select>

para que al seleccionar DNI...Se visualize el select II-A
y que al seleccionar CARNET DE EXTRANJERIA ...Se visualize el select II-B


Les agradesco mucho su apoyo.

[hoberwilly]

Buen dia amigos,

Solo para compartir mi humilde solucion, para que en algun momento a alguna persona como yo quizas le pueda ser útil.

Me base en el link de caricatos:
http://www.forosdelweb.com/f13/mostr...-radio-199855/

...pero lo adapte segun mis necesidades (2 selects dependientes de un primer select):

1. Este es mi primer select:

<select name="tipo_doc" id="tipo_doc" onchange="visible(this.value)">
<option selected="selected">Elige</option>
<option value=1>DNI</option>
<option value=2>Carnet de Extranjería</option>
</select>

2. Estos son mis dos selects dependientes del primero:
<select name="select 2.1" id="select 2.1" style="width:200px;display: none;">
<option selected="selected">Elige</option>
<option>Soles</option>
<option>Nuevos Soles</option>
</select>

<select name="select 2.2" id="select 2.2" style="width:200px;display: none;">
<option selected="selected">Elige</option>
<option>Dolares</option>
<option>Euros</option>
<option>Pesos</option>
</select>


3. Este el codigo js:

function visible(dato){
document.formu.select 2.1.style.display = (dato == "1") ? "none" : "inline";
document.formu.select 2.2.style.display = (dato == "2") ? "none" : "inline";
document.formu.select 2.1.disabled = (dato == "1") ? true : false;
document.formu.select 2.2.disabled = (dato == "2") ? true : false;
}

y listo.


Saludos,
Willy S.

[Adler]

Hola

La solución que planteas es totalmente válida. Pero y si no sabes la cantidad de elementos, por que se crearán dinámicamente, entonces deberías de usar esta otra función

Código javascript:

var valor = null;
function funcion(elem) {
  obj = document.getElementById(elem);
  obj.style.display = (obj==valor) ? 'none' : 'block';
  if (valor != null)
    valor.style.display = 'none';
  valor = (obj==valor) ? null : obj;
}
 

Código html:

onchange = "funcion(document.getElementById(this.options[this.selectedIndex].value))"
 

Suerte