使用 jQuery 在 IE 中隐藏 select 选项
Hiding select options in IE with jQuery
我有 2 个 select 列表,从第一个列表中选择一个选项将决定第二个列表中的可用选项。这在 Chrome 中非常有效,但是 IE 在更改第一个 select 时无法隐藏适当的选项。正在应用 hidden
class,但选项仍然可见。知道如何修改它以在 IE 中工作吗?
$(document).on('change', '#category', function(e) {
if ($(this).prop('selectedIndex') == 0) {
$('#condition option').addClass('hidden');
$('#condition .cat-1').removeClass('hidden');
} else if ($(this).prop('selectedIndex') == 1) {
$('#condition option').addClass('hidden');
$('#condition .cat-2').removeClass('hidden');
}
});
.hidden {
display: none !important;
}
#category {
height: 40px;
}
#condition {
height: 110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" size="2">
<option class="cat-1">Group 1</option>
<option class="cat-2">Group 2</option>
</select>
<select id="condition" size="2">
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
</select>
您可以将 select
option
保存到变量,然后删除并重新添加您想要的任何变量。
// saving options
var options = $("#condition option");
$(document).on('change', '#category', function(e) {
if ($(this).prop('selectedIndex') == 0) {
// deleteing all options
$("#condition").empty();
// adding options only of class .cat-1
options.filter(".cat-1").each(function() {
$("#condition").append($(this));
});
} else if ($(this).prop('selectedIndex') == 1) {
// deleteing all options
$("#condition").empty();
// adding options only of class .cat-2
options.filter(".cat-2").each(function() {
$("#condition").append($(this));
});
}
});
#category {
height: 40px;
}
#condition {
height: 110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" size="2">
<option class="cat-1">Group 1</option>
<option class="cat-2">Group 2</option>
</select>
<select id="condition" size="2">
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
</select>
我有 2 个 select 列表,从第一个列表中选择一个选项将决定第二个列表中的可用选项。这在 Chrome 中非常有效,但是 IE 在更改第一个 select 时无法隐藏适当的选项。正在应用 hidden
class,但选项仍然可见。知道如何修改它以在 IE 中工作吗?
$(document).on('change', '#category', function(e) {
if ($(this).prop('selectedIndex') == 0) {
$('#condition option').addClass('hidden');
$('#condition .cat-1').removeClass('hidden');
} else if ($(this).prop('selectedIndex') == 1) {
$('#condition option').addClass('hidden');
$('#condition .cat-2').removeClass('hidden');
}
});
.hidden {
display: none !important;
}
#category {
height: 40px;
}
#condition {
height: 110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" size="2">
<option class="cat-1">Group 1</option>
<option class="cat-2">Group 2</option>
</select>
<select id="condition" size="2">
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
</select>
您可以将 select
option
保存到变量,然后删除并重新添加您想要的任何变量。
// saving options
var options = $("#condition option");
$(document).on('change', '#category', function(e) {
if ($(this).prop('selectedIndex') == 0) {
// deleteing all options
$("#condition").empty();
// adding options only of class .cat-1
options.filter(".cat-1").each(function() {
$("#condition").append($(this));
});
} else if ($(this).prop('selectedIndex') == 1) {
// deleteing all options
$("#condition").empty();
// adding options only of class .cat-2
options.filter(".cat-2").each(function() {
$("#condition").append($(this));
});
}
});
#category {
height: 40px;
}
#condition {
height: 110px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" size="2">
<option class="cat-1">Group 1</option>
<option class="cat-2">Group 2</option>
</select>
<select id="condition" size="2">
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-1">Item from group 1</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
<option class="cat-2">Item from group 2</option>
</select>