JQuery EasyUI combobox 省市两级联动

表名:province  结构如下

JQuery EasyUI combobox 省市两级联动_第1张图片

CallIn.tpl 模板页

 
 
<select id="consult_province" name="consult_province" class="easyui-combobox" style="width:200px;"><{$json_province}></select></td>

<input id="consult_city" name="consult_city" class="easyui-combobox"  data-options="valueField:'id',textField:'text'" style="width:200px;" >
 
 
<script type="text/javascript">     

//省份 下拉菜单 联动 城市
    $("#consult_province").combobox({
        onChange: function (n,o) { //alert('223323');
         
            var selected_item=$('#consult_province').combobox('getValue');//省份
            //alert(selected_item);
 
            /*
            var data, json;
            json='[{"id":1 , "text":"兰州" },{"id":14 ,"text":"敦煌" ,"selected":true},{"id":15 , "text":"临夏"}]';
            data = $.parseJSON(json);
            $("#consult_city").combobox("loadData", data);
            */
 
            $.ajax({
                type: "POST",
                url: "Ajax-index.php?module=<{$module_name}>&action=Ajax_Province_Change",
                dataType: "json",
                data: {"data_item":selected_item },
                beforeSend: function(){
                    //$('<div id="msg" />').addClass("loading").html("加载中...").css("color","#999").appendTo('.sub1');
                },
                success: function(json){
                    if(json.success==1){
                        //alert(json.msg);
                        //$("#consult_city option[value!=0]").remove(); //导入批号
                     
                        var data = $.parseJSON(json.msg);
                        $("#consult_city").combobox("loadData", data);
                         
                    }else{
                        $.messager.alert('消息','数据加载失败!','error'); 
                        return false;
                    }
                }
            });
             
        }
    });
</script>

CallIn.php

//省份 智能提示--------------------------------------------------------------------------
$option='<option value="0"></option>';
$strSql="SELECT distinct name FROM province where deleted=0  order by date_entered asc";
$result_rows=$db->query($strSql);
while($row=mysql_fetch_array($result_rows)){ 
    //echo($row[0]);
    $option.='<option value="'.$row[0] .'">'. $row[0] .'</option>';
}
$smarty->assign('json_province', $option); 

Ajax_Province_Change.php

        $province = stripslashes(trim($_POST['data_item']));
        $select=" SELECT city_name  ";
        $select.=" FROM province WHERE deleted=0 and name='" . $province . "' ";
     
        $result=$db->query($select);
        $Select_Option="[";//
        $i=1;
        while($row=$db->fetch_array($result)){
            $value=$row[0];
            if($i==1){
                $Select_Option=$Select_Option . '{"id":"' .$value. '" , "text":"' . $value .'","selected":true },'; 
            }
            else{
                $Select_Option=$Select_Option . '{"id":"' .$value. '" , "text":"' . $value .'"   },'; 
            }
            $i=$i+1;
        }
        $Select_Option = substr($Select_Option,0,-1);
        $Select_Option=$Select_Option . ']';
 
        $arr['success'] = 1;
        $arr['msg'] = $Select_Option; 
        echo json_encode($arr);

 

 

你可能感兴趣的:(JQuery EasyUI combobox 省市两级联动)