Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
How can i filter the "Make" values according to the year. For eg: When i select "Year" as "2012" the related data i.e; only "def" should be displayed in the drop down box. Another problem is the previous data in the table was shown again when i select next values. See the demo for better understanding.
 
I tried this.
 
$.each(g_Vehicle, function(index) {
var sMake = g_Vehicle[index].Make;
if($('#DropDown_Year').val())=='2011'){ /* for testing purpose i give year as 2011*/
if ($.inArray(sMake, g_MakesArray) == -1) {
g_MakesArray.push(sMake);
}
}
});
http://jsfiddle.net/NFXzn/4/[^]
Posted 19-Nov-12 22:01pm

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Its your working code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
var g_Vehicle = [
{
Year: "2011",
Make: "abc",
Model: "100",
SubModel: "5000"},
{
Year: "2011",
Make: "abc",
Model: "200",
SubModel: "6000"},
{
Year: "2010",
Make: "def",
Model: "300",
SubModel: "5000"},
{
Year: "2011",
Make: "def",
Model: "100",
SubModel: "1000"},
{
Year: "2012",
Make: "def",
Model: "500",
SubModel: "9000"},
{
Year: "2011",
Make: "ghi",
Model: "100",
SubModel: "8000"},
{
Year: "2013",
Make: "def",
Model: "100",
SubModel: "1000"},
{
Year: "2013",
Make: "abc",
Model: "455",
SubModel: "10000"}
];
g_YearsArray = [];
g_MakesArray = [];
$.each(g_Vehicle, function(index) {
var iYear = g_Vehicle[index].Year;
if ($.inArray(iYear, g_YearsArray) == -1) {
g_YearsArray.push(iYear);
}
});
g_YearsArray.sort();
 
$.each(g_Vehicle, function(index) {
var sMake = g_Vehicle[index].Make;
if ($.inArray(sMake, g_MakesArray) == -1) {
g_MakesArray.push(sMake);
}
});
 
$(function(){
dropYear();
dropMake();
$('#DropDown_Year').change(function() {
var val = $(this).val();
$('.YearClass').html(val);
resetMake();
dropMake();
});
$('#DropDown_Make').change(function() {
var val = $(this).val();
$('.MakeClass').html(val);
});
$('select').change(function () {
var newRows = "";
$('#tableID').find("tr").each(function(){
if($(this).find("td").length>0)
$(this).remove();
});
 

$.each(g_Vehicle, function (index) {
if (g_Vehicle[index].Make == $('#DropDown_Make').val() && g_Vehicle[index].Year == $('#DropDown_Year').val()) {
newRows += "<tr><td>Year</td><td class='YearClass'>" + g_Vehicle[index].Year + "</td>";
newRows += "<td>Make</td><td class='MakeClass'>" + g_Vehicle[index].Make + "</td>";
newRows += "<td>Model</td><td class='ModelClass'>" + g_Vehicle[index].Model + "</td>";
newRows += "<td>SubModel</td><td class='SubModelClass'>" + g_Vehicle[index].SubModel + "</td>";
}
});
$('#tableID').append(newRows);
});
});
dropYear=function(){
$("#DropDown_Year").append('<option value="year">Year</option>');
$.each(g_YearsArray, function(i) {
$("#DropDown_Year").append('<option value="' + g_YearsArray[i] + '">' + g_YearsArray[i] + '</option>');
});
}
dropMake=function(){
{
resetMake();
$("#DropDown_Make").html('');
$("#DropDown_Make").append('<option value="make">Make</option>');
$.each(g_MakesArray, function(i) {
$("#DropDown_Make").append('<option value="' + g_MakesArray[i] + '">' + g_MakesArray[i] + '</option>');
});
}
 
}
resetMake=function(){
g_MakesArray=[];
if($("#DropDown_Year").val()=="year")
$.each(g_Vehicle, function(index) {
var sMake = g_Vehicle[index].Make;
if ($.inArray(sMake, g_MakesArray) == -1) {
g_MakesArray.push(sMake);
}
});
else{
$.each(g_Vehicle, function(index) {
var sMake = g_Vehicle[index].Make;
if(g_Vehicle[index].Year == $("#DropDown_Year").val())
    if ($.inArray(sMake, g_MakesArray) == -1) {
      g_MakesArray.push(sMake);
     }
});
}
 
}
</script>
</head>
<body>
<div id="DrpDwn">
Year:<select id="DropDown_Year"></select>
Make:<select id="DropDown_Make"></select>
</div>
<table id="tableID" class="q" width="400" border="1" cellpadding="2" cellspacing="2">
<tr>
<th>
Year
</th>
<th class="YearClass">
 
</th>
<th>
Make
<th class="MakeClass">
 
</th>
</tr>
</table>
</body>
</html>
  Permalink  
v2
Comments
y5me211112 at 20-Nov-12 5:47am
   
Thank u. Its working. If i have any questions i will let you know. :-)
deepak.m.shrma at 20-Nov-12 5:54am
   
Not a problem bro :-) n most welcom. :-)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Your Filters
Interested
Ignored
     
0 Guruprasad.K.Basavaraju 390
1 Shai Vashdi 349
2 Sergey Alexandrovich Kryukov 325
3 OriginalGriff 265
4 Peter Leow 171
0 Sergey Alexandrovich Kryukov 8,979
1 OriginalGriff 5,280
2 Peter Leow 4,010
3 Maciej Los 3,535
4 Abhinav S 3,263


Advertise | Privacy | Mobile
Web04 | 2.8.140415.2 | Last Updated 20 Nov 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Use
Layout: fixed | fluid