Question

我已经实现了jquery来从多个选择框中删除重复的选择选项（如果已经选中）。这在Firefox和Chrome中运行良好。但是，当我在IE中尝试相同时它失败了。不会从列表中删除/隐藏重复的问题。

<html>
<head>
<script src="jquery/jquery-1.11.1.js"></script>
<script>
$(document).ready(function(){
$('select').on('change', function(event) {
    //restore previously selected value
    var prevValue = $(this).data('previous');
    $('select').not(this).find('option[value="' + prevValue + '"]').show();

    //hide option selected now
    var value = $(this).val();
    //update previously selected data
    $(this).data('previous', value);
    $('select').not(this).find('option[value="' + value + '"]').hide();
});
});
</script>

<title>Insert title here</title>

</head>
<body>
<table>
<th>
QNA multiple select box
</th>
<tr>
<td>
<select name="selectBox1" id="selectBox1" class="wgtmsr">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    <option value="option7">option7</option>
</select>
</td>
<td>
    <input type="text" name="select1">
</td>
</tr>
<tr>
<td>
<select name="selectBox2" id="selectBox2" class="wgtmsr">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    <option value="option7">option7</option>
</select>
</td>
<td>
    <input type="text" name="select2">
</td>
</tr>
<tr>
<td>
<select name="selectBox3" id="selectBox3" class="wgtmsr">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    <option value="option7">option7</option>
</select>
</td>
<td>
    <input type="text" name="select3">
</td>
</tr>
<tr>
<td>
<select name="selectBox4" id="selectBox4" class="wgtmsr">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>
    <option value="option5">option5</option>
    <option value="option6">option6</option>
    <option value="option7">option7</option>
</select>
</td>
<td>
    <input type="text" name="select4">
</td>
</tr>
</table>
</body>
</html>

在IE中实现相同功能我缺少什么。

Jsfiddle

Answer 1

.show（）和hide（）不适用于ie中的选择选项。您可以尝试在此答案中说明的几种解决方法：JQuery Hide Option doesn't work in IE and Safari

其中一个将是以下内容： http://jsfiddle.net/4bvw91pm/

$.fn.showOption = function() {
    this.each(function() {
        if( this.tagName == "OPTION" ) {
            var opt = this;
            if( $(this).parent().get(0).tagName == "SPAN" ) {
                var span = $(this).parent().get(0);
                $(span).replaceWith(opt);
                $(span).remove();
            }
            opt.disabled = false;
            $(opt).show();
        }
    });
    return this;
    }
    $.fn.hideOption = function() {
    this.each(function() {
        if( this.tagName == "OPTION" ) {
            var opt = this;
            if( $(this).parent().get(0).tagName == "SPAN" ) {
                var span = $(this).parent().get(0);
                $(span).hide();
            } else {
                $(opt).wrap("span").hide();
            }
            opt.disabled = true;
        }
    });
    return this;
    }

Answer 2

最容易解决此问题的方法是：

替换此行：

$('select').not(this).find('option[value="' + value + '"]').hide();

使用此行：

$('select').not(this).find('option[value="' + value + '"]').prop('disabled','disabled');

和

删除此行：

$('select').not(this).find('option[value="' + prevValue + '"]').show();

改为添加此行：

$('select').not(this).find('option[value="' + prevValue + '"]').prop('disabled',false);

在IE浏览器中选择框选项隐藏显示

2 个答案:

最容易解决此问题的方法是：