java - pull json file on dropdown -
i trying pull json file on drop-downs show sizes available, color, , image of shirt. drop-downs work not showing on div when test it. got far.
p { display: inline; position: relative; letter-spacing: 20px; /* push giving nice 3d vibe */ color: rgba(0,0,255,0.5); /* give blue @ 50% opacity */ }<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>shirts 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"); (i = 0; < 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"); (i = 0; < 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"); (i = 0; < 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 genre</h1> <p> <br /> 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 /> 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 /> 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> </p> </body> </html>
there 2 error possibility -
the option insertion in select try this-
myselect.add(myoption);
look jsonm, may not extracting right information..
Comments
Post a Comment