Question

I have first drop down list ddl1 which contains these values:

• Car
• Van

and the second drop down list ddl2 contains:

• Car Honda
• Car BMW
• Van Golf

I need a script that filters the second ddl for example when I choose Car, the second ddl should only show these two fields:

Car Honda
– Car BMW

My code:

<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

you will want something like this:

Each List Item value in the second list should start with the same value of the item in the first list. This is so it can be filtered by the value of the first.

EDIT:

Items in drop downs.

List 1:

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

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