Click here to Skip to main content
15,879,326 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Here is the json. Im displaying year and make in a select box. When i select an year and make its related data should filter and display in a grid.For eg when i select 2010 and def the related data i.e,2010. def, 300 & 5000 should be displayed in the grid. Can any one help me to do this with out using any jquery plugins.

JavaScript
var data = [
    { 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",  }
];

Here is my code:
http://jsfiddle.net/qK2A3/2/[^]
Posted
Updated 13-Nov-12 19:27pm
v3

try this one bro. :-)

html code here...

HTML
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script><div>
  
<select id="mysel">
  <option value="2010">2010<option />
 <option value="2009">2009<option />
 <option value="2008">2008<option />
 <option value="2007">2007<option />
</option></option></option></option></select>
<table id="mytable">
  <tr>
    <th>Year</th>
    <th>Make</th>
    <th>Model</th>
    <th>SubModel</th>
  </tr>
<tr>
    <td><input type="text" id="year" value="year" /></td>
    <td>
    <td>
    <table><tbody><tr><td>
</td></tr></tbody></table></td></td></tr>
</table>
</div>


jquery code here..

JavaScript
var data = [
    { 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",  }
];
$(function(){
  $("#mysel").change(function(){
  var len=0;
    for(len = 0; len <data.length len="" mode="hold" />      if(data[len].Year==$(this).val()){
      alert(">>"+data[len].Make+"<< >>"+data[len].Model+"<< >>"+data[len].SubModel);
      $("#year").val(data[len].Year);
      $("#make").val(data[len].Make);
      $("#model").val(data[len].Model);
      $("#submod").val(data[len].SubModel);
      }
    }
  });

});


you can try it here.. :-)

http://jsbin.com/esosuw/1/
 
Share this answer
 
Dear Bro you have done lots of mistake. First download firebug and debug your code..
Here i have done modification in your code you can check this out. hope you will find your own mistake. otherwise i ll make it clear.

most important while accessing any database there must a unique key. it doesnt matter you use external DB or. json object. hope you will get what i m trying to say.

http://jsfiddle.net/qK2A3/4/
 
Share this answer
 
Comments
Anshu BM 14-Nov-12 7:38am    
I didn't want "Model" as drop box. when im executing the code there is no errors. I also using firebug to correct my mistakes. Do u get my problem??? When i select the values in the drop down remaining data should be displayed. For this first we have to filter the json array and next we have to display it in the table.
For Eg: When I select '2011' and 'abc' in drop box the remaining data what I mean is Model:"100" subModel:"5000" should be automatically displayed in the table.
Anshu BM 14-Nov-12 7:50am    
Any way Thanks for your support. Till now i didnt get the answer. Can you please help me. :-)
deepak.m.shrma 15-Nov-12 22:09pm    
brother. that is what i said. you have to make a primary key for selecting values,
suppose yor database is something like this
2011 abc 100 5000
2011 abc 200 6000
2010 def 300 5000
2011 def 100 1000

if you select 2011as year, abc as make, you will get 2 row,
ist and second row. how could you show 2 row in single field palce. you have to handle that scenario. so that you can handle those situation.
Anshu BM 16-Nov-12 2:07am    
Im not using any database to access values
deepak.m.shrma 16-Nov-12 2:17am    
bro. ur using json as database here. dont you get it..
C#
function getRelated() {
        $.each(g_Vehicle, function (index) {
            var sMake = g_Vehicle[index].Make;
            if (g_Vehicle[index].Make == $('#DropDown_Make').val() && g_Vehicle[index].Year == $('#DropDown_Year').val()) {
                $(".ModelClass").html(g_Vehicle[index].Model);
                $(".SubModelClass").html(g_Vehicle[index].SubModel);
            }
        });
    };

DEMO: http://jsfiddle.net/ybT7a/
It's working.
 
Share this answer
 

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900