pull json file on dropdown

Question

I am trying to pull json file on drop-downs to show the sizes available, color, and the image of the shirt. My drop-downs work but its not showing anything on my div when i test it. This is what i got so far.

 p { display: inline; position: relative; letter-spacing: 20px; /* This will push it together giving us a nice 3D vibe */ color: rgba(0,0,255,0.5); /* This will give us a blue at 50% opacity */ }

 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Shirts That you love</title> <link rel="stylesheet" type="text/css" href="StyleSheet.css" /> <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script> <script language="javascript" type="text/javascript"> var JSON_Response; $(document).ready(function () { $.getJSON('man.json', function (data) { JSON_Response = data; var mySelect = document.getElementById("selman"); for (i = 0; i < JSON_Response.man.length; i++) { var myOption = document.createElement("option"); myOption.text = JSON_Response.man[i].Shirt; myOption.value = i; try { mySelect.add(myOption, mySelect.options[null]); } catch (e) { mySelect.add(myOption, null); } } }); $.getJSON('women.json', function (data) { JSON_Response = data; http://www.w3schools.com/jsref/met_select_add.asp var mySelect = document.getElementById("selwoman"); for (i = 0; i < JSON_Response.women.length; i++) { var myOption = document.createElement("option"); myOption.text = JSON_Response.women[i].Shirt; myOption.value = i; try { mySelect.add(myOption, mySelect.options[null]); } catch (e) { mySelect.add(myOption, null); } } }); $.getJSON('kids.json', function (data) { JSON_Response = data; var mySelect = document.getElementById("selkids"); for (i = 0; i < JSON_Response.kids.length; i++) { var myOption = document.createElement("option"); myOption.text = JSON_Response.kids[i].Shirt; myOption.value = i; try { mySelect.add(myOption, mySelect.options[null]); } catch (e) { mySelect.add(myOption, null); } } }); $("#selman").change(function () { var myIndex = $("#selman").val(); $("#shirts").attr("src", JSON_Response.man[myIndex].shirtimage); var info = JSON_Response.man[myIndex].Shirt + "<br />"; info += JSON_Response.man[myIndex].Color + "<br />"; info += JSON_Response.man[myIndex].Sizes + "<br />"; info += "Man" + "<br />"; $("#divDisplay").html(info); }); $("#selwoman").change(function () { var myIndex = $("#selkids").val(); $("#shirts0").attr("src", JSON_Response.women[myIndex].shirtimage); var info = JSON_Response.women[myIndex].Shirt + "<br />"; info += JSON_Response.women[myIndex].Color + "<br />"; info += JSON_Response.women[myIndex].Sizes + "<br />"; info += "women" + "<br />"; $("#divDisplay0").html(info); }); $("#selkids").change(function () { var myIndex = $("#selwomen").val(); $("#shirts1").attr("src", JSON_Response.kids[myIndex].shirtimage); var info = JSON_Response.kids[myIndex].Shirt + "<br />"; info += JSON_Response.kids[myIndex].Color + "<br />"; info += JSON_Response.kids[myIndex].Sizes + "<br />"; info += "kids" + "<br />"; $("#divDisplay1").html(info); }); }); </script> </head> <body> <h1>Pick A Genre</h1> <p> <br /> Are you a man? </p> <table> <tr> <td rowspan="2"> <img id="shirts" alt="" src="" /></td> <td> <select id="selman"> <option></option> </select></td> </tr> <tr> <td> <div id="divDisplay"> </div> </td> </tr> </table> <p> <br /> Are you a woman? </p> <table> <tr> <td rowspan="2"> <img id="shirts0" alt="" src="" /></td> <td> <select id="selwoman"> <option></option> </select></td> </tr> <tr> <td> <div id="divDisplay0"> </div> </td> </tr> </table> <p> <br /> Are you a kid? </p> <table> <tr> <td rowspan="2"> <img id="shirts1" alt="" src="" /></td> <td> <select id="selkids"> <option></option> </select></td> </tr> <tr> <td> <div id="divDisplay1"> </div> </td> </tr> </table> <p> &nbsp; </p> </body> </html>

Answer 1

There are two error possibility -

The option insertion in select Try this-
mySelect.add(myOption);
Look into your JSONm, may be you are not extracting right information..

pull json file on dropdown

Question

1 answers

solution1
0 ACCPTED 2015-04-29 13:12:30

pull json file on dropdown

Question

1 answers

solution1 0 ACCPTED 2015-04-29 13:12:30

solution1
0 ACCPTED 2015-04-29 13:12:30