Solved

Populate a form dropdown with JSON

Posted on 2013-06-20
2
505 Views
Last Modified: 2013-06-21
Hi

I need to get data from a JSON file located in the root of my website. The data should them populate a dropdown menu.

The setup: ASP page with a form where there are 2 dropdown menu's. When the first changes i need a script that gets the corresponding values from the JSON file.

I have attached a sample JSON file. Imagine that the first dropdown has a selected value of "SAS".



{


"SAC": ["
{ "ddvalue":"8G","ddname":Agent"},"

"SAS": ["
{ "ddvalue":"BZ","ddname":Blizzard"},"
{ "ddvalue":"DY","ddname":Dynastar"},"
{ "ddvalue":"EL","ddname":Elan"},"
{ "ddvalue":"FI","ddname":Fischer"},"
{ "ddvalue":"HE","ddname":Head"},"
{ "ddvalue":"KS","ddname":Kästle"},"
{ "ddvalue":"LI","ddname":Line"},"
{ "ddvalue":"VL","ddname":Völkl"},"



"SBP": ["
{ "ddvalue":"PP","ddname":Pieps"},"


"SFA": ["
{ "ddvalue":"TT","ddname":Tatonka"},"



"SGO": ["
{ "ddvalue":"SY","ddname":Spy"},"

"SHE": ["
{ "ddvalue":"HE","ddname":Head"},"

"SHW": ["
{ "ddvalue":"21","ddname":2117"},"

"SJA": ["
{ "ddvalue":"21","ddname":2117"},"



"SPO": ["
{ "ddvalue":"LK","ddname":Leki"},"


"SSC": ["
{ "ddvalue":"CA","ddname":Cratoni"},"
{ "ddvalue":"PP","ddname":Pieps"},"

"SSO": ["
{ "ddvalue":"SP","ddname":Spyder"},"

"STA": ["
{ "ddvalue":"TT","ddname":Tatonka"},"

"STR": ["
{ "ddvalue":"21","ddname":2117"},"



"SUS": ["
{ "ddvalue":"21","ddname":2117"},"

"SUT": ["
{ "ddvalue":"21","ddname":2117"},"


}

Open in new window

0
Comment
Question by:kbnewgear
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 39261983
Where's the HTML code for the two dropdown?
Please validate your JSON data here : http://jsonlint.com/
Currentlu it's not a valid JSON object!
0
 
LVL 15

Assisted Solution

by:Jagadishwor Dulal
Jagadishwor Dulal earned 250 total points
ID: 39262011
See here the example this is the html page please manage the jquery src file:

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.getJSON('mylist.json',function(data){
            console.log('success');
            $.each(data.employees,function(i,emp){
                $('select').append('<option value="'+emp.firstName+' '+emp.lastName+'">'+emp.firstName+' '+emp.lastName+'</option>');
            });
        }).error(function(){
            console.log('error');
        });
    });
</script>
</head>
<body>
    <select name="fullname">
    
    </select>
</body>
</html>

Open in new window


Now mylist.json file save it in the same folder to load:
{"employees" : [{"firstName":"Jagadish","lastName":"Dulal"},
    {"firstName":"John","lastName":"doe"},
    {"firstName":"Diwakar","lastName":"Shrestha"}
]}

Open in new window


Again see css tricks for reference:
http://css-tricks.com/dynamic-dropdowns/
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question