I have been looking at a lot of combo boxes but have yet to see one that uses JSON on the backend or one that is more than six fields. I was trying to use http://www.appelsiini.net/2010/jquery-chained-selects as a resource but am having trouble implementing JSON at the backend. Would someone mind giving me a hand?
<p class="notice" > <select id="forGender" > <option value="" >-- </option > <option value="m" >Guys </option > <option value="f" >Girls </option > </select >
<select disabled="" id="displayType" > <option value="" >-- </option > </select >
<select disabled="" id="material" > <option value="" >-- </option > </select >
<select disabled="" id="color" > <option value="" >-- </option > </select >
<select disabled="" id="price" > <option value="" >-- </option > </select >
<select disabled="" id="custom" > <option value="" >-- </option > </select >
$(function(){
$("#displayType").chained("#gender");
$("#band <aterial").chained("#displayType");
$("#color").chained("#bandMaterial");
$("#caseDiameter").chained("#color");
$("#bandWidth").chained("#caseDiameter");
$("#keywords").chained("#bandWidth");
});
</script >
</p >
json
{ "idName": "The Time Teller", "forGender": "m", "displayType": "analog", "bandType": "plastic", "caseDiameter": 1.5, "caseThickness": 0.5, "bandWidth": 0.78, "items": [ { "color1": "white", "color2": "none", "price": 59.99, "cat": "29400", "img": "155320-0002-front", "sku": 155411 }, { "color1": "blue", "color2": "none", "price": 59.99, "cat": "32579", "img": "155411-0005-front", "sku": 160041 }, { "color1": "black", "color2": "pink", "price": 59.99, "cat": "38404", "img": "160041-0001-front", "sku": 155320 } ], "specialInformation": { "restrictions": "Available for US customers only.", "details": [ "Custom 3 hand Japanese quartz movement.", "100 meter molded polycarbonate case.", "Hardened mineral crystal.", "Locking looper and polycarbonate buckle." ], "desc": "Nixon's The Time Teller watch keeps it simpleton with hard case and custom molded polyurethane band." } }