我準備今天花壹小時為妳寫壹個無級聯動!!!就是隨便妳增加多少,都不要改程序
------------------------------------------------------
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無極聯動啊,花了我壹個小時</title>
<script src="這裏是 jQuery.js,妳自己加載" type="text/javascript"></script>
</head>
<body>
<div id="form">
壹級<select><option value="">請選擇</option><option value="10">10</option><option value="20">20</option><option value="30">30</option></select>
二級<select></select>
三級<select></select>
四級<select></select>
</div>
<script type="text/javascript">
var url = 'data.php';
var defaultOption = '<option>請選擇</option>';
$('#form select').each(function(){
//$(this).prepend('<option>請選擇</option>');
}).change(function(){
var $opt = $(this);
var index = $('#form select').index(this);
if( $(this).val() == '' )
return ;
$.get( url ,{opt:$(this).val(),index:index},function(data){
var showData = eval('('+data+')');
$opt.nextAll('select').add(this).each(function(i){
var html = '';
var value = ''
for( var j = 0; j < showData.length ; j++ ){
if( typeof( showData[i] ) == 'undefined' || typeof( showData[i][j]) == 'undefined' )
continue;
html += '<option vlaue="'+ showData[i][j] + '">'+showData[i][j]+ '</option>';
}
$(this).html( html );
});
});
});
</script>
</body>
</html>
------------------------------------------
這是測試數據,實際情況,妳是從數據庫調用的,我寫了壹個demo
-----------------------------------------
data.php
<?php
$opt = $_GET['opt'];
$index = $_GET['index'];
if( $index = '1' ){
if( $opt == 10 )
exit('Array([1021,1022,1032,1024],[1031,1032,1033,1034],[1041,1042,1043,1044])');
elseif( $opt == 20 )
exit('Array([2021,2022,2032,1024],[2031,2032,2033,1034],[2041,2042,2043,2044])');
elseif( $opt == 30 )
exit('Array([3021,3022,3032,3024],[3031,3032,3033,3034],[3041,1042,3043,3044])');
}elseif( $index = '2' ){
// 這裏的數據是壹樣的格式。。。。
}if( $opt = '3' ){
//...
}
>-------------------------------
我只做了第幾級的數據哦,這是無極聯動,妳直接增加數據就可以了,不需要修改程序。
累死我了,吃飯去了。
有問題留言。