suusuke - blog

あるタイミングで、Optionの中身を非表示にしたいと言う事ある。
jQueryでそれを書こうとすると

$([selector]).toggle(false);
$([selector]).css('display', 'none');

のどちらかで非表示にできるはずですが、IEでは表示になりません。

なので、Option を コピーして擬似的にtoggleを実装します。

$(function() {
    $('body').append('<select id="copy" style="display:none;"></select>');
    $('select[name=list]').eq(0).children().clone().prependTo('#copy');

    $('input[type=radio][name=switch]').change(function() {
        switchEventTime($('input[type=radio][name=switch]:checked'));
    });

    switchEventTime($('input[type=radio][name=switch]:checked'));
    function switchEventTime(_this) {
        if (!_this) {
            return false;
        }

        var val = $(_this).val();
        if (val == '1') {
            var cur = $('select[name=list]').val();
            $('select[name=list]').children().remove();
            $('#copy').children().each(function () {
                var option = $(this);
                if (option.val() != '') {
                    return;
                } else {
                    $('select[name=list]').append(option.clone());
                }
            });
            $('select[name=list]').val(cur);
        } else {
            var cur = $('select[name=list]').val();
            $('select[name=list]').children().remove();
            $('#copy').children().each(function () {
                var option = $(this);
                $('select[name=list]').append(option.clone());
            });
            $('select[name=list]').val(cur);
        }
    }
});