- A+
所属分类:PHP
HTML模板:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <link href="__PUBLIC__static/easyui/css/easyui.css" rel="stylesheet" type="text/css" /> <link href="__PUBLIC__static/easyui/css/icon.css" rel="stylesheet" type="text/css" /> <script src="__PUBLIC__static/easyui/js/jquery.min.js" type="text/javascript"></script> <script src="__PUBLIC__static/easyui/js/jquery.easyui.min.js" type="text/javascript"></script> <script src="__PUBLIC__static/easyui/js/easyui-lang-zh_CN.js" type="text/javascript"></script> </head> <body> <table> <tr> <td>开发渠道:</td> <td> <select id="dev" class="easyui-combobox" name="dev" data-options="required:true,panelHeight:'auto',editable:false" validType="comboxValidate['dev','请选择开发渠道']"> <option value="0">--------------请选择-------------</option> {volist name="dev" id="e" } <option value="{$e.id}">{$e.dev}</option> {/volist} </select> </td> <td>信息来源:</td> <td> <select id="from" class="easyui-combobox" name="from" required="true" data-options="required:true,panelHeight:'auto',editable:false" validType="comboxValidate['from','请选择信息来源']"> <option value="0">--------------请选择-------------</option> {volist name="from" id="a" } <option value="{$a.id}">{$a.from}</option> {/volist} </select> </td> </tr> </table> </body> </html>
JS:
$(function(){ // 下拉列表扩展验证 $.extend($.fn.validatebox.defaults.rules, { comboxValidate : { validator : function(value, param,missingMessage) { if($('#'+param).combobox('getValue')!=0 && $('#'+param).combobox('getValue')!=null){ return true; } return false; }, message : "{1}" } }); // 联动方式一: $('#dev').combobox({ onChange:function(newValue,oldValue){ //信息来源 var pid = newValue; // console.info(pid); $.getJSON('{:url('link')}?id='+pid,function(result){ var data = $.makeArray(result); data.unshift({"id":"","from":"--------------请选择-------------"}); // console.info(data); $('#from').combobox({ valueField:'id', //值字段 textField:'from', //显示的字段 data:data, panelHeight:'auto', required:true, editable:false//不可编辑,只能选择 }); $('#from').combobox('setValue' , ''); }); } }); // 联动方式二: /*$('#dev').combobox({ onChange:function(){ var pid = $('#dev').combobox('getValue'); //信息来源 $('#from').combobox({ valueField:'id', //值字段 textField:'from', //显示的字段 url:'{:url('link')}?id='+pid, panelHeight:'auto', required:true, editable:false,//不可编辑,只能选择 value:'--------------请选择-------------' }); $('#from').combobox('setValue',''); } });*/ })
PHP:
//模型 <?php namespace app\index\model; use think\Model; use think\Db; // 填充表单数据模型 class AddForm extends Model{ // 获取表单数据 function getinfo($v){ $data=Db::name($v) ->select(); return $data; } // 联动 public function linkage($id){ $data=Db::name('from') ->where('pid',$id) ->select(); return $data; } }
//控制器 <?php namespace app\index\controller; use app\index\model\AddForm; class Useradd extends Base{ // 填充表单数据 public function index(){ $addform=new AddForm; $dev=$addform->getinfo('dev_from'); //开发渠道 $from=$addform->getinfo('from'); //信息来源 $this->assign([ 'dev' => $dev, 'from' => $from, ]); return $this->fetch('useradd'); } // 联动 public function link($id){ $addform=new AddForm; // dump(input('post.')); $from=$addform->linkage($id); //信息来源 return json($from); } }
以上就是核心代码,最后再附上一段jquery写的联动代码,稍微改改就能用。
//取分类的联动 $("select[name=cat_id]").change(function(){ var _this = $(this); // 获取选择的类型的ID var catId = $(this).val(); var opt = "<option value=''>请选择</option>"; // 如果选择了一个类型就执行AJAX取出个类型下的属性 if(catId != "") { $.ajax({ type : "GET", url : "<?php echo url('Shop/ajaxcat', '', FALSE); ?>/catId/"+catId, dataCity : "json", success : function(data) { // 把返回的属性放到属性的下拉框中 $(data).each(function(k,v){ opt += "<option value='"+v.cat_id+"'>"+v.cat_name+"</option>"; }); // 把这个下拉框后面的一个下拉框放进去 _this.next("select").html(opt); } }); } else _this.next("select[name=cat_idb]").html(opt); });

我的微信公众号
我的微信公众号扫一扫
2016-12-25 18:50 沙发
谢谢分享