JQuery 下拉列表过滤器

Question

我有第一个下拉列表 ddl1 包含以下值：

• Car
• Van

，第二个下拉列表 ddl2 包含：

• Car Honda
• Car BMW
• Van Golf

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

Car Honda - 宝马汽车

我的代码：

<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>