推 MOONRAKER:json讚 06/21 15:01
http://pipirun.gotdns.com/test/double_select
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 175.180.97.168
※ 編輯: tkdmaf 來自: 175.180.97.168 (06/21 08:15)
※ 編輯: tkdmaf 來自: 220.136.71.43 (06/21 10:05)
我的做法就比較省一點大量資料的工了。
也就是將要顯示的資料預先用json格式來放,到使用時再解回select。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script src="jquery.js"></script>
<script>
var mydata = {
"1":["a1","a2","a3"],
"2":["b1","b2","b3","b4"],
"3":["c1","c2","c3","c4","c5"]
}
$(function(){
do_select();
$('#sel1').change(do_select);
})
function do_select(){
$('#sel2').html('');
sel1_value = $('#sel1 option:selected').val();
sel2_op = mydata[sel1_value];
for(var key in sel2_op){
value = sel2_op[key]
$('#sel2').append('<option value="'+value+'">'+value+'</option>')
}
}
</script>
</head>
<body>
<select id="sel1">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select id="sel2">
</select>
</body>
</html>
若是select2的value和顯示的內容有所不同。
就稍微修正一下json的資料格式和解陣列的方式就好了。
範例顯示在這裡: