cargar datos de mySql y automatizar Js

crissrocca · #1 (**permalink**) 22/05/2011, 12:40

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;
}

JS

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?