Select dinámico

[Banditolane]

Buenas a todos:

Tengo un form con un select. A continuación de éste, habría otro que depende del primero, es decir, en funcion de la opción seleccionada en el primer select, cambiará el contenido del segundo... Os muestro el código que estoy usando y que no funciona... al menos dinamicamente:

Código:

<script type="text/javascript">

var cat;
cat = $("#categoria").val();
if(cat == 'Hotel') {
$('#add_form').append("Estrellas:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Estrella</option><option>2 Estrellas</option><option>3 Estrellas</option><option>4 Estrellas</option><option>5 Estrellas</option></select><br><br>");
}

else if(cat == 'Restaurante') {
$('#add_form').append("Tenedores:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Tenedor</option><option>2 Tenedores</option><option>3 Tenedores</option><option>4 Tenedores</option><option>5 Tenedores</option></select><br><br>");
}

else {
$('#add_form').append("Subcategor&iacute;a:<br><select id='subcategoria' name='subcategoria'><option>-----</option><option>Azafatas</option><option>Empresas de transporte</option><option>Catering</option><option>Audiovisuales</option><option>OPC</option><option>Publicidad y comunicaci&oacute;n</option><option>Agencias de viajes</option></select><br><br>");
}

</script>

Bueno, espero que alguien haya hecho esto antes y me pueda ayudar.

Gracias y un saludo!

[_cronos2]

Yo con jQuery no sé pero si puedes hacerlo en JS normal te puedo ayudar.
Saludos (:

[Banditolane]

exploremos cualquier opción, si no es demasiado compleja...

[_cronos2]

Ok, veamos:

Código Javascript:

function depender(sel, sel2){
 var textos = new Array('1estrella', '2estrellas', '1tenedor', '2tenedores', 'audiovisual', 'azafatas');
 switch (sel.value){
  case 'Hotel' :
   for(i=0; i<2; i++){
    sel2.options[i].text = textos[i];
   }
   break;
  case 'Restaurante' : 
   for(i=2; i<4; i++){
    sel2.options[i-2].text = textos[i];
   }
   break;
  default : 
   for (i=4; i<textos.length; i++){
    sel2.options[i-4].text = textos[i];
   }
   sel2.setAttribute('id', 'subcategoria';
   sel2.setAttribute('name', 'subcategoria');
   break;
  }
}
 

Evidentemente este código se puede hacer mucho más bonito y elegante, pero así a grandes rasgos tendría que funcionar igual. Por cierto, ten en cuenta el número de opciones en los for para restar.
Saludos (:

[Banditolane]

No me ha funcionado esa opción que me propones... ya encontré algo que mas o menos funciona, pero sigue teniendo un fallo. Este es el código:

Código:

var cat;
cat = $("#categoria").val();

$("#categoria").change( function () {

alert(cat); 
if(cat == 'Hotel') {
    $('#dim_form').append("Estrellas:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Estrella</option><option>2 Estrellas</option><option>3 Estrellas</option><option>4 Estrellas</option><option>5 Estrellas</option></select><br><br>");
}
else if(cat == 'Restaurante') {
    $('#dim_form').append("Tenedores:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Tenedor</option><option>2 Tenedores</option><option>3 Tenedores</option><option>4 Tenedores</option><option>5 Tenedores</option></select><br><br>");
}
else if(cat ==  'Servicios') {
    $('#dim_form').append("Subcategor&iacute;a:<br><select id='subcategoria' name='subcategoria'><option>-----</option><option>Azafatas</option><option>Empresas de transporte</option><option>Catering</option><option>Audiovisuales</option><option>OPC</option><option>Publicidad y comunicaci&oacute;n</option><option>Agencias de viajes</option></select><br><br>");
}

});

El problema está en que siempre mantiene el value del select de manera que, cuando hace el alert, elija la opción que elija, siempre me dice 'Hotel'... y entonces solamente me agrega la primera versión del 2º select. Pienso que debe haber alguna opción que no sea el $('select').val(); para extraer ese valor...

Gracias y un saludo!


PD --> Gracias de todas formas...

[Adler]

Hola

Prueba así

$(document).ready(function(){

var cat;

$("#categoria").change( function () {
cat = this.value;

if(cat == 'Hotel') {
$('#dim_form').append("Estrellas:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Estrella</option><option>2 Estrellas</option><option>3 Estrellas</option><option>4 Estrellas</option><option>5 Estrellas</option></select><br><br>");
}

else if(cat == 'Restaurante') {
$('#dim_form').append("Tenedores:<br><select id='puntuacion' name='puntuacion'><option>-----</option><option>1 Tenedor</option><option>2 Tenedores</option><option>3 Tenedores</option><option>4 Tenedores</option><option>5 Tenedores</option></select><br><br>");
}

else if(cat == 'Servicios') {
$('#dim_form').append("Subcategor&iacute;a:<br><se lect id='subcategoria' name='subcategoria'><option>-----</option><option>Azafatas</option><option>Empresas de transporte</option><option>Catering</option><option>Audiovisuales</option><option>OPC</option><option>Publicidad y comunicaci&oacute;n</option><option>Agencias de viajes</option></select><br><br>");
}

});
});

Suerte
PD: Recuerda que este es el foro de javascript

[Banditolane]

CONSEGUIDO!!

Peeeerfecto, ahora ya si me coge el cambio de valor en el select y cambia el 2º perfectamente, lo único que lo he implementado con un empty() antes del append() y ya va canela en rama!!

Muchísimas gracias hefaso!

P.D. --> Porque lo dices?hay un foro específico de jQuery??

[_cronos2]

Sí
Saludos (: