jQuery Dropdown multiple parents not populating dependent dropdown

jquery
#1

I’m working on a code where I’m merging the selections from the previous select questions to filter and populate my dependent dropdown.

However, I’m stuck at a point in the code which I’m using to filter by concatenating the values of the previous question selections with a “.”(dot) in between.

The main portion of the jquery code:

$("#PhoneType").on("change", function() {
    if ( this.value == "FeaturePhone")
    {
    $('#FeaturePhone').show();

    $('#SelectPhone option')
    .hide()
    .filter([value=$('#PhoneType').val() + '.' + $('#FeaturePhoneFeature').val() + '.' + $('#AllPhoneFeature').val()])
    .show();

    $("#SelectPhone").val([]);
    }
    else
    {
    $('#FeaturePhone').hide();

    $('#SelectPhone option')
    .hide()
    .filter([value=$('#PhoneType').val() + '.' + $('#AllPhoneFeature').val()])
    .show();

    $("#SelectPhone").val([]);
    }
});

I’m certain it’s an issue with the “.filter” code but I’m unable to crack it from a very long time now. Please excuse any silly errors as I’m a total noob at this.

Full code here: https://jsfiddle.net/mithunu/fs86q9no/2/ . Will really, really appreciate your help in getting this working.

#2

Hi @mithunuchil, from a quick look you’re missing the quotes around the selectors you’re passing to filter() (in strict mode you’d actually get an error here). BTW an empty array isn’t a valid value for an input / select element, but it will get coerced to a string… I wouldn’t rely on this behaviour though, better be explicit so you don’t get results you might not expect.