Filtering select drop down box options

Question

I am trying to filter some drop down select boxes on each other but am getting some strange behavior with one of the options.

jsfiddle here

This is the jQuery I am using:

$(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 don't display properly in the 2nd drop-down. The actual drop down box doesn't get rendered properly (in Chrome, not tested in other browsers).

Does anyone have a solution/workaround to this issue?

The jsfiddle actually works fine for me (Chrome on OSX). What version of Chrome and OS are you using? — Jelle Kralt, Jan 06 '14 at 21:36
I just realised that you are trying to hide the select options, as far as I know this isn't possible (at least not in Chrome). See [this question](http://stackoverflow.com/questions/4398966/how-can-i-hide-select-options-with-javascript-cross-browser) for more info — Jelle Kralt, Jan 06 '14 at 21:42
Hiding them is working in Chrome, just the display issue when selecting Essex. Tried it in IE and it displays all options and just disables them depending on which option is selected, so guess hiding doesn't work at all in IE but is still functional. — user2121189, Jan 06 '14 at 21:47
The hiding actually doesn't work for me in Chrome, I don't know why it works for you on some occasions though. If I do a quick Google search on the matter it seems that it's really not reliable. I wouldn't use it, the link I added to my previous comment describes a simple jQuery plugin that can temporarily remove an option and put it back later using the data function. — Jelle Kralt, Jan 06 '14 at 21:58

kei · Answer 1 · 2014-01-06T22:37:13.753

One way to do it is have a hidden select that has all the options and you only copy over the ones you need on 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);
        }
    });
});

Filtering select drop down box options

1 Answers1