Question

在Html中我使用Select with Options。如果您在输入字段中键入，则选项将隐藏或显示选项文本是否以输入文本开头。

$(document).on('keyup', '#modal-newSeriennummer', function () {
    var datalist = $('#serialnumbers')[0].options;
    for (var i = 0; i < datalist.length; i++) {
        if (!datalist[i].text.startsWith($(this).val())) {
            $(datalist[i]).hide();
        } else {
            $(datalist[i]).show();
        }
    }

    var onlyVisible = $('#serialnumbers').find('option:visible');

    if (onlyVisible.length == 1) {
        var key = event.keyCode || event.charCode;
        if (key == 8 || key == 46)
            return;
        $('#serialnumbers').val(onlyVisible.val());
        $(this).val(onlyVisible.html());
        GetSpecificHgData(onlyVisible.val());
    } else {
        $('#serialnumbers').val('');
    }
});

HTML：

<input id="modal-newSeriennummer" type="Text" name="newSeriennummern">
<select id="serialnumbers" size="6">
<option value="3bb55850-1884-4f43-85a2-04871ab0a2ff">79523</option>
<option value="dc689af1-abff-4f97-9633-0814d4bbf0ff">19038</option>
<option value="b72c213a-2a81-41d8-8b30-0b14015fb699">29028</option>
<option value="8276cbe9-1394-4448-9b59-0e2e9e9231e4">79193</option>
<option value="0188762d-25ec-41c1-83e2-171cba062050">39259</option>
<option value="e369b23f-3827-4d95-9d90-1b127b0beb8f">22898</option>
</select>

它工作正常但不适用于IE 9.选项标签的样式为 display none 但它想隐藏。

Answer 1

IE不支持style="display:none;"

而不是option.style.display = 'none'您尝试了option.hidden = true;。

你也可以：

$("option_to_hide").wrap('<span/>');
$("option_to_hide").unwrap('<span/>');

使用功能

jQuery.fn.toggleOption = function( show ) {
    $( this ).toggle( show );
    if( show ) {
        if( $( this ).parent( 'span.toggleOption' ).length )
            $( this ).unwrap( );
    } else {
        if( $( this ).parent( 'span.toggleOption' ).length == 0 )
            $( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

使用它：

$("option_to_toggle").toggleOption(true); // show option
$("option_to_toggle").toggleOption(false); // hide option

对于select的选项，IE 9忽略display none

1 个答案: