[問題] jQuery cascade 動態下拉式選單的應用?!

看板Ajax作者idcomputer (順)時間16年前 (2009/08/21 19:45)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串1/2 (看更多)

畫面是三層式下拉選單，如果list想用mysql資料表裡面資料的話該怎麼去修改透用呢?! **********************javascript的部分********************** <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cascade.js"></script> <script type="text/javascript" src="jquery.cascade.ext.js"></script> <script type="text/javascript" src="jquery.templating.js"></script> <script type="text/javascript"> var list1 = [ {'When':'A','Value':'A1','Text':'A1'}, {'When':'A','Value':'A2','Text':'A2'}, {'When':'A','Value':'A3','Text':'A3'}, {'When':'A','Value':'A4','Text':'A4'}, {'When':'B','Value':'B1','Text':'B1'}, {'When':'B','Value':'B2','Text':'B2'}, {'When':'B','Value':'B3','Text':'B3'}, {'When':'B','Value':'B4','Text':'B4'}, {'When':'C','Value':'C1','Text':'C1'}, {'When':'C','Value':'C2','Text':'C2'}, {'When':'D','Value':'D1','Text':'D1'}, {'When':'D','Value':'D2','Text':'D2'} ]; var list2 = [ {'When':'A1','Value':'W','Text':'SubchildA1a'}, {'When':'A1','Value':'X','Text':'SubchildA1b'}, {'When':'A2','Value':'Y','Text':'SubchildA2a'}, {'When':'A2','Value':'Z','Text':'SubchildA2b'}, {'When':'B1','Value':'W','Text':'SubchildB1a'}, {'When':'B1','Value':'X','Text':'SubchildB1b'}, {'When':'B2','Value':'Y','Text':'SubchildB2a'}, {'When':'B2','Value':'Z','Text':'SubchildB2b'}, {'When':'C1','Value':'W','Text':'SubchildC1a'}, {'When':'C1','Value':'X','Text':'SubchildC1b'}, {'When':'C2','Value':'Y','Text':'SubchildC2a'}, {'When':'C2','Value':'Z','Text':'SubchildC2b'}, {'When':'D1','Value':'W','Text':'SubchildD1a'}, {'When':'D1','Value':'X','Text':'SubchildD1b'}, {'When':'D2','Value':'Y','Text':'SubchildD2a'}, {'When':'D2','Value':'Z','Text':'SubchildD2b'} ]; function commonTemplate(item) { return "<option value='" + item.Value + "'>" + item.Text + "</option>"; }; function commonTemplate2(item) { return "<option value='" + item.Value + "'>***" + item.Text + "***</option>"; }; function commonMatch(selectedValue) { return this.When == selectedValue; }; ***************************程式碼的部分****************************** </script> <h2>Chained</h2> <div> <label>Parent <select id="chained"> <option value=""></option> <option value="A">A</option> <option value="B">B</option> <option value="C">C</option> <option value="D">D</option> </select> </label> <label>Child <select id="chained_child"> </select> </label> <label>SubChild <select id="chained_sub_child"> </select> </label> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#chained_child").cascade("#chained",{ ajax: {url: 'data.js' }, template: commonTemplate, match: commonMatch }); jQuery("#chained_sub_child").cascade("#chained_child",{ list: list2, template: commonTemplate, match: commonMatch }); }); </script> -- ※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 61.221.166.118 ※ 編輯: idcomputer 來自: 61.221.166.118 (08/21 19:46) ※ 編輯: idcomputer 來自: 61.221.166.118 (08/21 19:47)