JQuery 下拉列表过滤器

Question

我有第一个下拉列表ddl1，其中包含这些值：

• 汽车
• 范

第二个下拉列表ddl2 包含：

• 汽车本田
• 汽车宝马
• 范高尔夫

我需要一个过滤第二个 ddl 的脚本，例如当我选择 Car 时，第二个 ddl 应该只显示这两个字段：

汽车本田 - 汽车宝马

我的代码：

<script type="text/javascript">
function Filter(){
    var names = $('#typeCar option').clone();
    $('#Type').change(function(){
        var val = $(this).val();
        $('#typeCar').empty();
        names.filter(function(idx, el){
            return val === 'ALL' || $(el).text().indexOf(val) >= 0;
        }).appendTo('#typeCar');
    });
}
</script>

Answer 1

你会想要这样的：

第二个列表中的每个列表项值应以与第一个列表中的项相同的值开头。这样就可以通过第一个的值进行过滤。

编辑：

下拉菜单中的项目。

清单 1：

Car     -Value = 001
Truck   -Value = 002
Van     -Value = 003

清单 2：

Car option 1 - Value = 001001
Car option 2 - Value = 001002
Car option 3 - Value = 001003
Truck   option 1 - Value = 002001
Truck   option 2 - Value = 002002
Truck   option 3 - Value = 002003
Van     option 1 - Value = 003001
Van     option 2 - Value = 003002
Van     option 3 - Value = 003003

Javascript：

<script>

    //Array to hold original subTypes
    var _SubTypes = new Array();

    $(document).ready(
                      function()
              {
                //Store the sub types
                StoreSubTypes();

                //Set up company Type on Change
                $("#comp_type").change(CompanyTypeOnChange);
                      }
                     );

    //Function to Store Initial List of Sub Types
    function StoreSubTypes()
    {
        $("#comp_subtype option").each(
                               function(index, option)
                           {
                            //Store the option
                            _SubTypes[index] = option;
                           }
                          );
    }

    //Function to Filter Company Sub Types and Hide various fields
    function CompanyTypeOnChange()
    {
        //Filter the Sub TYpes
        FilterSubTypes();
    }

    //Filters the company sub types drop down
    function FilterSubTypes()
    {
        //Get the value of the selected Company Type
        var compType = $("#comp_type").val();

        //Remove all Sub Type Items
        $("#comp_subtype option").remove();


        //Add the related items back to the list
        $.each(_SubTypes, function(index, value)
                  {
                    //Get the current option
                    var option = _SubTypes[index];

                    //Get the first 3 characters of the value - this is the same as the compType if related
                    var subTypeIdentifier = option.value.substring(0,3);

                    //Add the option to the list if its valid for the compType
                    if(subTypeIdentifier==compType)
                    {       
                        $("#comp_subtype").append(option);
                    }

                    //Add the --None-- option
                    if (option.value=="")
                    {
                        $("#comp_subtype").append(option);
                    }
                  }
                  );
    }


    </script>