Onethink页面二次开发做一个二级联动下拉选择框搜索功能
一、前端html代码
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
二、前端jQuery中ajax方法异步获取数据
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
三、后台PHP获取产品分类数据
1 2 |
$product=D("Category")->getTree(1); $this->assign('product',$product); |
四、后台PHP处理前端ajax请求并返回数据
1 2 3 4 5 6 7 8 9 10 11 |
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; } |
转载请注明:PHP笔记 » jQuery中ajax方法及PHP实现下拉选择框联动