CODEWITHSUNDEEP
javascriptjquery
Megan Woodruff
Megan Woodruff

Reputation: 194

Dynamic dropdowns filtering options with jquery

I am trying to filter one dropdown from the selection of another in a Rails 4 app with jquery. As of now, I have:

$(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();
    });
});

The task list is a regular collection_select and the subtask list is a grouped_collection_select. Both which work as expected. The problem is that even with this code listed above I can't get the correct subtasks to display for the selected task.

NOTE: I also tried var tasks=$(this).find(:selected).val() that return the correct number but the options filtering still didn't work.

Upvotes: 0

Views: 77

Answers (1)

Tomanow
Tomanow

Reputation: 7367

Try something like this instead (untested but should work).

$(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);
    });
});

Upvotes: 1

Related Questions