筛选选择下拉框选项

Question

我正在尝试互相过滤一些下拉选择框，但其中一个选项却出现一些奇怪的行为。

jsfiddle在这里

这是我正在使用的jQuery：

$(document).ready(function () {
$('select:gt(0)').find('option:gt(0)').hide().prop('disabled', true);

$('#C5R').change(function () {
    $('select:gt(0)').find('option:gt(0)').hide();
    var thisVal = $(this).val();
    if (thisVal == 1) {
        $('#C5T').find('option').each(function () {
            var thisVal = $(this).val();
            $(this).hide().prop('disabled', true);;
            if ((thisVal >= 1) && (thisVal <= 11)) {
                $(this).show().prop('disabled', false);;
            }
        });
    } else if (thisVal == 2) {
        $('#C5T').find('option').each(function () {
            var thisVal = $(this).val();
            $(this).hide().prop('disabled', true);;
            if ((thisVal >= 12) && (thisVal <= 32)) {
                $(this).show().prop('disabled', false);;
            }
        });
    } else if (thisVal == 3) {
        $('#C5T').find('option').each(function () {
            var thisVal = $(this).val();
            $(this).hide().prop('disabled', true);;
            if ((thisVal >= 33) && (thisVal <= 51)) {
                $(this).show().prop('disabled', false);;
            }
        });
    }
});
});

从理论上讲它可以正常工作，第二个下拉列表在第一个下拉列表上进行过滤（我还没有在第三个下拉列表上编程过滤，所以请忽略它），但是当选择Essex（第三个选项）时，该选项不会在第二个下拉菜单中正确显示。 实际的下拉框未正确呈现（在Chrome中，未在其他浏览器上进行测试）。

是否有人对此问题有解决方案/变通办法？

Answer 1

一种方法是使用具有所有选项的隐藏select ，然后仅复制change需要的选项

演示

的HTML

<select name="C5T" size="1" id="C5T" onchange="{C5TSelectChange(); onBlurUpdate(this)}" class="fontSize"></select>
<select id="C5Thidden" style="display:none">
    <option class="fontSize"></option>
    <option value="1" class="fontSize">Dereham</option>
    <option value="2" class="fontSize">East Dereham</option>
    ...
    <option value="51" class="fontSize">Witham</option>
</select>

jQuery的

$(document).ready(function () {
    $('#C5R').change(function () {
        var thisVal = $(this).val();
        $C5T = $('#C5T');
        $C5T.empty();
        $options = $('option', '#C5Thidden');
        if (thisVal == 1) {
            filteredOptions = $options.slice(1, 12).clone();
            $C5T.append(filteredOptions);
        } else if (thisVal == 2) {
            filteredOptions = $options.slice(12, 33).clone();
            $C5T.append(filteredOptions);
        } else if (thisVal == 3) {
            filteredOptions = $options.slice(33).clone();
            $C5T.append(filteredOptions);
        }
    });
});