jQuery选择器不起作用时的HTML选择

Question

我有以下代码，它生成我的select元素

    <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>

我还有另外三个select用来过滤这个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()" })

这个JS方法完成了这项工作

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

问题是过滤似乎在Select上没有正确的效果，一些项目被正确过滤了一些过滤器设置，当我确定有匹配的元素应该显示时，当Chrome开发工具控制台正确获取元素时，我做错了什么？

Answer 1

所以这种选择器方法不起作用，我记得有一个jQuery或JS方法，由于一些延迟或其他原因，它提交了一些对DOM的更改，但我记不起它是什么了，Google也记不起来，每个option元素都有正确的display:none或display:inline，但select的下拉列表总是空的，甚至select元素的宽度也是正确的，这表明有要显示的项。

因此，我假设这是使用1000s+条目或Chrome的selects的一些限制

这项工作的结果是必须这样做，将option与select分离，使用它们，然后附加它们，并考虑在需要重新过滤option时保留所有select元素的副本

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