HTML Select with jQuery Selector not working

Question

I have this code which generates my select element

    <select id="Select">
@foreach (var obj in Model.Objs)
{
        <option value="@obj.Value" data-1="@obj.Data1" data-2="@obj.Data2" data-3="@obj.Data3">
            @obj.Name
        </option>            
}            
    </select>

I have three other select s that I am using to filter this select

@Html.DropDownListFor(x => Model.Filter1Selected, Model.Filter1Items, new { @onchange = "Filter_Changed()" })
@Html.DropDownListFor(x => Model.Filter2Selected, Model.Filter2Items, new { @onchange = "Filter_Changed()" })
@Html.DropDownListFor(x => Model.Filter3Selected, Model.Filter3Items, new { @onchange = "Filter_Changed()" })

And this JS method that does the work

function Filter_Changed() {
    var filter1 = $(Filter1Selected).val();
    var filter2 = $(Filter2Selected).val();
    var filter3 = $(Filter3Selected).val();
    $(Select).find("option").show();
    if (filter1 > 0) {
        $(Select).find("option").not("[data-1='" + filter1 + "']").hide();
    }
    if (filter2 > 0) {
        $(Select).find("option").not("[data-2='" + filter2 + "']").hide();
    }
    if (filter3 > 0) {
        $(Select).find("option").not("[data-3='" + filter3 + "']").hide();
    }
}

The issue is the filtering does not seem to take proper effect on the Select, some items are filtered correctly for some filter settings, and when I definitely know that there are matching elements that should be shown, and when Chrome dev tools console gets the elements correctly, what am I doing wrong?

Answer 1

So this selector approach wasn't working, I remember that there is a jQuery or JS method that commits some changes to the DOM because of some delay or something but I cannot remember what it is and neither could Google, each option element has the correct display:none or display:inline but the drop down for the select is always empty, even the width of the select element is correct that there are items to show.

So I assume this is some limitation of selects with 1000s+ entries or Chrome

The result of this work is having to do this, detatching the option s from the select , working with them and then appending them, with consideration to keep a copy of all the option elements when the select needs to be re-filtered

var options;
function Filter_Changed() {
    var filter1 = $(Filter1Selected).val();
    var filter2 = $(Filter2Selected).val();
    var filter3 = $(Filter3Selected).val();

    if (options != null) { $(Select).html(options); }
    options = $(Select).find("option").detach();
    $(Select).html(options);

    if (filter1 < 253) { options.not("[data-1='" + filter1 + "']").remove(); }
    if (filter2 > 0) { options.not("[data-2='" + filter2 + "']").remove(); }
    if (filter3 > 0) { options.not("[data-3='" + filter3 + "']").remove(); }
}