usando jquery, ¿cómo puedo filtrar un campo desplegable según el valor seleccionado de otro campo desplegable

Solo me falta algo.

Muy simple o así lo pensé, usando jquery: en función del valor seleccionado en el menú desplegable Trabajadores , quiero mostrar solo ciertos valores en el menú desplegable Opciones de fruta .

Así, por ejemplo, si se selecciona Roy en el menú desplegable Trabajadores , solo quiero que aparezcan las manzanas y los duraznos como opciones dentro del menú desplegable de Opciones de fruta. El menú desplegable de opciones de fruta .

¿Cómo puedo, correctamente, usar jquery, filtrar el menú de Opciones de fruta en función de la selección del menú desplegable Trabajador?

Mi jfiddle está aquí : http://jsfiddle.net/justmelat/BApMM/1/

Mi código:

 Worker:  Roy John Dave   

Fruit Options: Apples Oranges Pears Peaches Grapes Melons Nut Jelly

Necesita una estructura de datos para mapear la relación entre el trabajador y la fruta. Algo como abajo,

 var workerandFruits = { Roy: ["Apples", "Peaches"], John: ["Oranges", "Pears", "Peaches", "Nut"] } 

Luego, debe escribir un controlador onchange para $('select[name=Select1') dentro del cual necesita filtrar las opciones $('select[name=Select2]) según el texto de las opciones seleccionadas en Select1 ( $(this).find('option:selected').text(); ).

Ahora, utilizando la Select2 puede determinar las frutas que el trabajador seleccionado prefiere y llenar el Select2 basándose en eso.

 $workers.change(function () { var $selectedWorker = $(this).find('option:selected').text(); $fruits.html($fruitsList.filter(function () { return $.inArray($(this).text(), workerandFruits[$selectedWorker]) >= 0; })); }); 

DEMO: http://jsfiddle.net/tKU26/

Haz algo como esto:

   var data = [ // The data ['Roy', [ 'Apples','Peaches' ]], ['John', [ 'Oranges', 'Pears', 'Peaches', 'Nuts' ]] ]; $a = $('#worker'); // The dropdowns $b = $('#fruits'); for(var i = 0; i < data.length; i++) { var first = data[i][0]; $a.append($(" 

http://jsfiddle.net/xRTAk/

Usar AJAX es una excelente manera de hacer lo que estás pidiendo.

Por favor, perdóneme si ya lo sabe, pero en jQuery / javascript, usted:

  • tomar el valor del primer cuadro de selección

  • use el código AJAX para enviarlo a un archivo PHP secundario, que usa los datos que recibe para escribir un código HTML basado en lo que el usuario eligió

  • el HTML recién creado se devuelve a la rutina ajax, donde se recibe dentro de una función de success

  • Dentro de la función de success , puede usar jQuery para reemplazar el contenido del segundo menú desplegable

Aquí hay un ejemplo detallado , con explicaciones.