JQuery下拉列表过滤器

我有第一个下拉列表

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>

函数过滤器（）{
变量名称=$（“#typeCar选项”）.clone（）；
$（'#Type'）。更改（函数（）{
var val=$（this.val（）；
$（'#typeCar'）.empty（）；
名称.过滤器（函数（idx，el）{
return val=='ALL'| |$（el）.text（）.indexOf（val）>=0；
}).appendTo（“#typeCar”）；
});
}

您将需要以下内容：

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

编辑：

下拉列表中的项目

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

//用于保存原始子类型的数组
var_subtype=新数组（）；
$（文件）。准备好了吗(
函数（）
{
//存储子类型
存储子类型（）；
//根据变更设置公司类型
$（“公司类型”）变更（公司类型变更）；
}
);
//用于存储子类型初始列表的函数
函数存储子类型（）
{
$（“#comp#u子类型选项”）。每个(
功能（索引、选项）
{
//存储选项
_子类型[索引]=选项；
}
);
}
//用于过滤公司子类型和隐藏各种字段的函数
函数CompanyTypeOnChange（）
{
//过滤子类型
过滤器子类型（）；
}
//筛选“公司子类型”下拉列表
函数过滤器子类型（）
{
//获取所选公司类型的值
var compType=$（“#comp_type”）.val（）；
//删除所有子类型项
$（“#comp_子类型选项”）.remove（）；
//将相关项目添加回列表
$.each（_子类型，函数（索引，值）
{
//获取当前选项
变量选项=_子类型[索引]；
//获取值的前3个字符-如果相关，则与compType相同
var子类型标识符=option.value.substring（0,3）；
//如果该选项对compType有效，则将其添加到列表中
if（子类型标识符==compType）
{       
$（“#comp_子类型”）。追加（可选）；
}
//添加--None--选项
如果（option.value==“”）
{
$（“#comp_子类型”）。追加（可选）；
}
}
);
}

function Filter（）{var names=$（'#保险选项'）.clone（）；$（'#Type'）.change（function（）{var val=$（this.val（）；$（'#保险'）.empty（）；names.Filter（function（idx，el）{return val=='ALL'| |$（el.text（）.indexOf（val）>=0；}.appendTo（“#保险”）；}@sally：我把它编辑成了你的问题，可读性更强。当尝试运行它时，我在javascript对象上出现了一个错误预期汽车贷款卡车贷款出租车贷款汽车保险1汽车保险2卡车保险1卡车保险2出租车保险1我的code@Sally-我没有使用这些名称编写代码对于你的控件等，它更多的是一个示例来向你展示如何操作。如果你仔细阅读注释，它应该会让你知道如何实现你想要的。如果没有看到页面的完整代码和行号，错误就很难看出问题出在哪里is@Sally，我在答案中添加了列表项作为示例当然，我更改了变量的名称，但在javascript中给出了一个运行时错误