I have first drop down list ddl1
which contains these values:
and the second drop down list ddl2
contains:
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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.