1

我有 2 个下拉菜单，我希望第二个下拉菜单在$('#first_dropdown').change()发生时隐藏/显示某些元素（有一个类）

我尝试了同样的方法，但收效甚微，我怎样才能达到同样的效果，我想<option>在我的第二个下拉列表中隐藏一大块我该怎么做？

我尝试过的代码：

var a = $('#first_dd').val(); //first dropdown - dd value
$('#first_dd').change(function(){
$('.a').hide();        //iv given a class to all elements of second dropdown
});
4

2 回答 2

3

您无法在所有浏览器的选择框中隐藏选项。您需要将您的选项存储在一个数组中，并从选择元素中实际删除它们。当第一个选择元素发生变化时，重建第二个选择元素可能更容易，而忽略了您不想要的选项。

使用 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);

所以我们不必隐藏任何选项，我们只需每次都用过滤后的所有可用选项集替换它们。

于 2012-09-17T13:02:02.583 回答
3

因此，您正在尝试根据第一个下拉菜单的更改来更改第二个下拉菜单。

这个小提琴可以帮助你：

jsFiddle

于 2012-09-17T13:03:27.777 回答