Mostrar campos con cambio de combobox

[dvbeaumont]

Hola Tengo el siguiente código, funciona perfectamente si cambio a la primera opción, pero lo que deseo es que cada opcion despliegue un campo y oculte otro.

Código Javascript:

window.onload = function() {
        var eSelect = document.getElementById('transfer_reason');
        var optOtherReason = document.getElementById('otherdetail');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 1) {
                optOtherReason.style.display = 'block';
            } else {
                optOtherReason.style.display = 'none';
            }
        }
    }
 

Código HTML:

<select name="nofarmaco_prev" id="transfer_reason2" style="width:100%;float:left;margin-right:10px; " onchange="document.getElementById('otherdetail2').style.display = (this.selectedIndex === 1) ? 'block' : 'none';">
                <option value="0">No</option>
                <option value="1">Si</option>
             </select>
 
<div id="otherdetail2" style="display: none;">
    <table class="nuevo_paciente" width="100%">
<tr>
<td  align=center>
<h2>¿Tipo de tratamiento?</h2>
</td>
</tr>
    <tr>
        
        <td>
            <select name="farmaco_prev" id="transfer_reason2" style="width:100%;float:left;margin-right:10px; " >
                <option value="1">Farmacológico</option>
                <option value="0">No Farmacológico</option>
                <option value="2">Ambas Farmacológico/No Farmacológico</option>
             </select>
          </td>
    </tr>
 
 </table>
    
    </div>
 

Espero su ayuda, Saludos

[gonzalezm_alexis]

un consejo primero en html no es muy recomendable tener 2 id repetidos ya que el js siempre va a tomar el primer elemento que encuentre con ese id (hablo de los transfer_reason2)

lo otro podrias explicar bien tu problema ya que no le entendi muy bien

[dvbeaumont]

Tengo un select con dos opciones.

Deseo que al abrir la primera opcion del select se despliegue una tabla, y si selecciono la segunda despliegue otra tabla y oculte la que mostraba anteriormente.

Ejm:
<select>
<option>Casas</option>
<option>Apartamentos</option>
</select>

Cuando aparece el HTML se ve primero "<option>Casas</option>"

Y ahi muestra un cuadro debajo con X's información contenida en un "div"

Si le doy a "<option>Apartamentos</option>" se oculta el div que despliega casas y se abre uno nuevo que pertenece a "<option>Apartamentos</option>"

Esto funciona de forma contraria, si vuelvo a presionar "<option>Casas</option>" Se aparece el div de casas y se oculta el div de apartamentos.

[beeman00]

esta funcion tal vez sea lo que buscas:

Código Javascript:

function mostrar_ocultar(cadena_ids,opcion){
    var tmp = cadena_ids.split(',')
    for(i=0; i<tmp.length; i++){
        document.getElementById(tmp[i]).style.display=(opcion=='ocultar'?'none':'block');
   }
}
 

en el html:

Código HTML:

.
.
.
.
<select name="select1" id="select1" onchange="mostrar_ocultar('elemento1,elemento2,elemento3,elemento4','ocultar');mostrar_ocultar('elemento6,elemento7,elemento8,elemento9','mostrar');">
.
.
.
.
<select>
 

avisas cualquier duda....


nota:
cadena_ids es una lista de "id" de elementos separadas por coma....

[dvbeaumont]

El HTML quedaría de esta forma?

No comprendo como hacer que funcione bien.

Código HTML:

<select name="select1" id="select1" onchange="mostrar_ocultar('elemento1,elemento2,elemento3,elemento4','ocultar');mostrar_ocultar('elemento6,elemento7,elemento8,elemento9','mostrar');">
<option id="elemento1">Casa</option>
<option id="elemento2">Casa2</option>
<select>
<div id="elemento7">asdas</div>
<div id="elemento6">123123</div>
 

[beeman00]

sorry... no habia visto tu comentario, el hecho es que vas a mostrar u ocultar elementos segun la opcion seleccionada.

a la funcion que te di le hace falta esto:

Código Javascript:

function mostrar_ocultar(valor){
    var cadena_ids='';
    switch(valor){
         case 1:cadena_ids = 'elemento1|block,elemento2|none,elemento3|block';
         case 2:cadena_ids = 'elemento1|none,elemento2|block,elemento3|ocultar';
    }
    var tmp = cadena_ids.split(',')
    for(i=0; i<tmp.length; i++){
        document.getElementById(tmp[i].split('|')[0]).style.display=tmp[i].split('|')[1];
   }
}
 

y en html:

Código HTML:

.
.
.
<select name="select1" id="select1" onchange="mostrar_ocultar(this.value);">
.
.
.
.
<select>
 

[dvbeaumont]

No, aun asi no funciona

Código Javascript:

function mostrar_ocultar(valor){
    var cadena_ids='';
    switch(valor){
         case 1:cadena_ids = 'elemento1|block,elemento2|none,elemento3|block';
         case 2:cadena_ids = 'elemento1|none,elemento2|block,elemento3|ocultar';
    }
    var tmp = cadena_ids.split(',')
    for(i=0; i<tmp.length; i++){
        document.getElementById(tmp[i].split('|')[0]).style.display=tmp[i].split('|')[1];
   }
}
 

Código HTML:

<select name="select1" id="select1" onchange="mostrar_ocultar(this.value);">
<option id="elemento1">Casa</option>
<option id="elemento2">Casa2</option>
</select>
 <div id="elemento3">asdas</div>
<div id="elemento3">3215</div>
 

[beeman00]

Iniciado por dvbeaumont

No, aun asi no funciona

Código Javascript:

function mostrar_ocultar(valor){
    var cadena_ids='';
    switch(valor){
         case '1':cadena_ids = 'elemento1|block,elemento2|none,elemento3|block';
         case '2':cadena_ids = 'elemento1|none,elemento2|block,elemento3|none';
    }
    var tmp = cadena_ids.split(',');
    for(i=0; i<tmp.length; i++){
    alert(tmp);
    alert(tmp[i].split('|')[0]);
        document.getElementById(tmp[i].split('|')[0]).style.display=tmp[i].split('|')[1];
   }
}
 

Código HTML:

<select name="select1" id="select1" onchange="mostrar_ocultar(this.value);">
<option  value="1">Casa</option>
<option  value="2">Casa2</option>
</select>
 
 <div id="elemento1">asdas</div>
<div id="elemento2">3215</div>
<div id="elemento3">fgs dfgsd fgsdfgsdf gsd gsdg sdg</div>
 

listo probado y todo.

no le estabas colocando valor a las opciones

[dvbeaumont]

No hace el cambio, me oculta el

elemento1 y deja el elemento2

Pero no hace cambios, o sea si le doy luego al value=1 no oculta el elemento2 ni visceversa

[dvbeaumont]

Lo consegui por internet.

Ejm para que la gente pueda usarlo:

Código Javascript:

function toggleSubmit(obj){
 
count=0
while(document.getElementById("d"+count)){
document.getElementById("d"+count).style.display="none"
count++
}
document.getElementById("d"+obj.selectedIndex).style.display="block"
 
}
 

Código HTML:

<SELECT id="ptype" NAME="ptype" onchange="toggleSubmit(this)">
<option value="Contract">Contract</option>
<option value="Direct_hire">Direct Hire</option>
</select>
 
<div id="d0" style="display:block">NUMBER OF CONTRACTORS</div>
<div id="d1" style="display:none">TARGET COMPENSATION</div>
 

Muchas Gracias