您无法在所有浏览器的选择框中隐藏选项。您需要将您的选项存储在一个数组中,并从选择元素中实际删除它们。当第一个选择元素发生变化时,重建第二个选择元素可能更容易,而忽略了您不想要的选项。
使用 Kakarott 的小提琴作为基础,我会这样做:
演示
这应该适用于所有浏览器。
如果您尚未在 select1 中选择任何内容,则更新小提琴以不显示任何选项。
最终代码:
HTML
<select name="select1" id="category">
<option value="0">None</option>
<option value="1">First</option>
<option value="2">Second</option>
</select>
<select name="items" id="select2">
<option value="0" class="1">Item 1</option>
<option value="1" class="1">Item 2</option>
<option value="2" class="2">Item 3</option>
<option value="3" class="2">Item 4</option>
</select>
JS
/* Taking an array of all options-2 and save it on select1 */
$("#category").data('options',$('#select2 option').clone());
$("#select2").html("");
$("#category").change(function() {
var itemClass = $(this).val();
var options = $(this).data('options').filter('.' + itemClass);
$('#select2').html(options);
});
更新
:额外说明
这一行:
$("#category").data('options',$('#select2 option').clone());
选择第一个选择框,并使用.data
方法将一些数据附加到该选择框。哪些数据?选择框 2 包含的所有选项。如何?通过选择所有选项选择框 2 包含,并克隆它们(复制它们)。
它保存了这组选项,因为这样我们可以一次又一次地使用这个集合,使用选择框 1 中的选定值对其进行过滤,并将其余选项设置为选择框 2 的内容,替换之前的任何选项。这发生在这一行:
var options = $(this).data('options').filter('.' + itemClass);
所以我们不必隐藏任何选项,我们只需每次都用过滤后的所有可用选项集替换它们。