Dynamische Dropdown-Filteroptionen mit jquery

Question

Ich versuche, ein Dropdown aus der Auswahl eines anderen in einer Rails 4 App mit jquery zu filtern. Ab jetzt habe ich:

$(document).ready(function(){ 
    $('#task_id').change(function(){ 
     var subtasks = $('#subtask_id').html(); //works 
     var tasks = $(this).find(:selected).text(); //works 
     var options = $(subtasks).filter("optgroup[label ='#{task}']").html(); // returns undefined in console.log 
     if(options != '') 
      $('#subtask_id').html(options); 
     else 
      $('#subtask_id').empty(); 
    }); 
}); 

Die Aufgabenliste ist eine regelmäßige collection_select und die Unteraufgabe Liste ist ein grouped_collection_select. Beide funktionieren wie erwartet. Das Problem ist, dass selbst mit diesem Code, der oben aufgeführt ist, ich nicht die richtigen Teilaufgaben für die ausgewählte Aufgabe angezeigt bekommen kann.

HINWEIS: Ich habe auch versucht var tasks=$(this).find(:selected).val(), die die richtige Zahl zurückgeben, aber die Filterung der Optionen funktionierte immer noch nicht.

Answer 1

Versuchen Sie stattdessen etwas (ungetestet, sollte aber funktionieren).

$(function() { 
    var $parent = $('#task_id'), 
     $child = $('#subtask_id'), 
     $cloned = $child.clone().css('display', 'none'); 

    function getParentOption() { 
     return $parent.find('option:selected'); 
    } 

    function updateChildOptions($options) { 
     $child.empty(); 
     $child.append($options); 
    } 

    $parent.change(function (e) { 
     var $option = getParentOption(); 
     var label = $option.prop('value'); // could use $option.text() instead for your case 
     var $options = $cloned.find('optgroup[label="' + label + '"]'); 
     updateChildOptions($options); 
    }); 
});