过滤选择下拉框选项答案

【问题标题】：Filtering select drop down box options过滤选择下拉框选项
【发布时间】：2014-01-06 21:21:48
【问题描述】：

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

这是我正在使用的 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);;
            }
        });
    }
});
});

In theory it works fine, the second drop-down is filtered on the first (I haven't got to programming the filtering on the 3rd yet so please ignore that) but when Essex is selected (the 3rd option) the options在第二个下拉菜单中无法正确显示。实际的下拉框未正确呈现（在 Chrome 中，未在其他浏览器中测试）。

有人对此问题有解决方案/解决方法吗？

【问题讨论】：

jsfiddle 实际上对我来说很好用（OSX 上的 Chrome）。您使用的是哪个版本的 Chrome 和操作系统？
Chrome 31.0.1650.63 m 并赢得 7
我刚刚意识到您正试图隐藏选择选项，据我所知这是不可能的（至少在 Chrome 中是不可能的）。请参阅this question 了解更多信息
隐藏它们在 Chrome 中有效，只是选择 Essex 时的显示问题。在 IE 中尝试过，它会显示所有选项并根据选择的选项禁用它们，所以猜测隐藏在 IE 中根本不起作用，但仍然有效。
隐藏实际上在 Chrome 中对我不起作用，但我不知道为什么它在某些情况下对你有用。如果我对此事进行快速谷歌搜索，它似乎真的不可靠。我不会使用它，我添加到我之前评论的链接描述了一个简单的 jQuery 插件，它可以暂时删除一个选项并稍后使用数据函数将其放回。

标签： javascript jquery html

【解决方案1】：

一种方法是隐藏select，其中包含所有选项，您只需在change 上复制您需要的选项

DEMO

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

【讨论】：