he generado esto para poder anidar 2 listados y a la hora de seleccionar una opcion mostra el contenido de una tabla + otras opciones.
HMTL Código HTML:
<body>
<div class="selectContainer" style="float:left">
<select id="theSelect">
<option value="">- Select -</option>
<option value="_A1">A1</option>
<option value="_A2">A2</option>
<option value="_A3">A3</option>
</select>
</div>
<div class="is_A1">A1
<select id="theSelect2">
<option value="">- Select -</option>
<option value="_B1">B1</option>
<option value="_B2">B2</option>
<option value="_B3">B3</option>
</select>
<div>
<div class="is2_B1">B1</div>
<div class="is2_B2">B2</div>
<div class="is2_B3">B3</div>
</div>
</div>
<div class="is_A2">A2<select id="theSelect3">
<option value="">- Select -</option>
<option value="_C1">C1</option>
<option value="_C2">C2</option>
<option value="_C3">C3</option>
</select>
<div>
<div class="is3_C1">C1</div>
<div class="is3_C2">C2</div>
<div class="is3_C3">C3</div>
</div>
</div>
<div class="is_A3">A3<select id="theSelect4">
<option value="">- Select -</option>
<option value="_D1">D1</option>
<option value="_D2">D2</option>
<option value="_D3">D3</option>
</select>
<div>
<div class="is4_D1">D1</div>
<div class="is4_D2">D2</div>
<div class="is4_D3">D3</div>
</div></div>
</body> CSS
Código:
.hidden {
display: none;
}
Código:
$('[class^=is]').hide();
$("#theSelect").change(function(){
var value = $("#theSelect option:selected").val();
var theDiv = $(".is" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is]').slideUp();
});
$('[class^=is2]').hide();
$("#theSelect2").change(function(){
var value = $("#theSelect2 option:selected").val();
var theDiv = $(".is2" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is2]').slideUp();
});
$('[class^=is3]').hide();
$("#theSelect3").change(function(){
var value = $("#theSelect3 option:selected").val();
var theDiv = $(".is3" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is3]').slideUp();
});
$('[class^=is4]').hide();
$("#theSelect4").change(function(){
var value = $("#theSelect4 option:selected").val();
var theDiv = $(".is4" + value);
theDiv.slideDown();
theDiv.siblings('[class^=is4]').slideUp();
});
funciona correctamente pero necesito ahora adaptarlo para cargar los datos dinamicamente de una tabla mysql y automatizar el js para tantos select contenga esa seleccion.
como veis la diferencia en el js tan solo es el numero al que llama, #theSelect2/#theSelect3/#theSelect4/#theSelect.... supongo que haciendo algun tipo de bucle con variables se puede hacer que el codigo tanto en php como js se escriba una vez y se lea desde el servidor tantas N veces como campos cargue, no?
es algo que he visto y tengo algunos ejemplos, pero no se como puedo hacerlo por ajax.
como puedo hacerlo?