jQuery中ajax方法及PHP实现下拉选择框联动

Onethink页面二次开发做一个二级联动下拉选择框搜索功能

一、前端html代码

    <form name="form1" action="/search.html" method="post"/>
    	<div class="select_search_menu">
    		<select class="s0" id="s0" name="key2">
    			<option value="">Please select menu</option>
    			<volist name="product[_]" id="vo">
    				<option value="{$vo.id}">{$vo.title}</option>
    			</volist>
    		</select>
    	</div>
    	<div class="select_search_menu" id="s0son"></div>
    	<input type="image" src="__IMG__/select_search.jpg" class="selsearch" />
    </form>

<option value="">Please select menu</option>

<option value="{$vo.id}">{$vo.title}</option>

</volist>

</select>

</div>

</form>

二、前端jQuery中ajax方法异步获取数据

    <script type="text/javascript">
    $(document).ready(function(){
    	$("#s0").change(function(){
    		var cateid=$("#s0").val();
    		$.ajax({
    			type:'POST',
    			url:"linkage.html",
    			data:{cateid:cateid},
    			success:function(data){
    			      $("#s0son").html(data);
    		        }
    		});
    	});
    });
    </script>

$(document).ready(function(){

$("#s0").change(function(){

var cateid=$("#s0").val();

$.ajax({

type:'POST',

url:"linkage.html",

data:{cateid:cateid},

success:function(data){

$("#s0son").html(data);

}

});

</script>

三、后台PHP获取产品分类数据

    $product=D("Category")->getTree(1);
    $this->assign('product',$product);

1 2	$product=D("Category")->getTree(1); $this->assign('product',$product);

四、后台PHP处理前端ajax请求并返回数据

    public function linkage(){
    	$cateid = I('post.cateid');
    	$arclist = D('Document')->lists($cateid);
     
    	$html = "<select class='s1' id='s1' name='key3'>";
    	foreach($arclist as $k=>$v){
    		$html .= "<option value=".$v['title'].">".$v['title']."</option>";
    	}
    	$html .= "</select>";
    	echo $html;
    }