Question

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

汽车
范

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

Car Honda
汽车宝马
Van Golf

我需要一个过滤第二个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>

JQuery下拉列表过滤器

1 个答案: