作者idcomputer (順)
看板Ajax
標題[問題] jQuery cascade 動態下拉式選單的應用?!
時間Fri Aug 21 19:45:12 2009
畫面是三層式下拉選單，
如果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)