@@ -219,6 +219,25 @@ </form> </div> </li> + + + <li class="ex11"> + <h3>11. Linked drop down boxes</h3> +<div class="template"> +Make: +<select class="make"> + <option>Choose..</option> + <option class="values"></option> +</select> + +Model: +<select disabled class="model"> + <option></option> +</select> +</div> + </li> + + </ul> </div> index.html @@ -321,3 +321,55 @@ var ex10 = { sizes: [{ val:'S', name: 'small' }, { val:'M', name: 'medium', sel: true }, {val:'L', name:'large'}] } }; + +var ex11 = function(){ + var data = { + 'makes':[ + { + "name":"Ford", + "models":[ + {"name":"Fusion"}, + {"name":"Mustang"} + ] + }, + { + "name":"Chevrolet", + "models":[ + {"name":"Aveo"}, + {"name":"Camaro"} + ] + } + ] + }; + // render the first drop down + $p('select.make').render(data, { + '@onchange':'"clickSelect(this);"', + 'option.values':{ + 'make <- makes':{ + '.':'make.name' + } + } + }); + // compile the second drop down to reuse it for each changes + var subSel = $p('select.model').compile({ + '@disabled':function(a){ + return a.context === false ? 'x':''; + }, + 'option':{ + 'model <-':{ + '.':'model.name' + } + } + }); + // the onchange function for the first drop down + window.clickSelect = function(sel){ + var idx = sel.selectedIndex-1, + models; + if(idx >= 0){ + models = data.makes[idx].models; + $p('select.model').render(models, subSel); + }else{ + $p('select.model').render(false, subSel); + } + }; +}; js/examples.js 84362323d30239e0a49e4d76779e73bdcefa1fb8 mic mic@beebole.com http://github.com/pure/pure/commit/be40f489ca379dd9e566ddf46d37ec2682abe5d9 be40f489ca379dd9e566ddf46d37ec2682abe5d9 2009-10-19T13:31:37-07:00 2009-10-19T13:31:37-07:00 Example 11: linked drop down boxes 3d54796373946bf7f75f2758223d746253001513 mic mic@beebole.com