帝國CMS7.2實現地區三級聯動并且前臺可地區篩選的教程

2024-08-28 12:24:09

字體：大中小

來源：轉載

供稿：網友

帝國CMS的三級聯動一直是個痛，以前一流資源網站長有分享過一篇“帝國CMS可自定義數據的三級聯動選擇功能教程”非常好用，

今天再分享一款三級聯動代碼，同樣可以自定義數據，并且附上前臺根據三級地區篩選的功能示例代碼：

第一步：

后臺添加三個數據表字段

字段名：pro 字段標識：省輸入表單替換html代碼：

1	`<select name="pro"></select>`

字段名：city 字段標識：市輸入表單替換html代碼：

1	`<select name="city"></select>`

字段名：area 字段標識：縣輸入表單替換html代碼：

1	`<select name="area"></select>`

第二步：

建立完畢后，在到管理系統模型修改生成相應的表單！

三個字段設為提交項可添加修改列表顯示結合項

第三步：

打開e/admin/AddNews.php

把以下代碼粘貼到結尾的隨便位置即可

<script type="text/javascript" src="selects.js"></script>
<script type="text/javascript" src="data_china.js"></script>
<script type="text/javascript">
var s = selects;
//獲取對象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//區
//綁定數據
s.bind(p,province);
s.bind(c,city);
s.bind(a,area);
//確定從屬關系
s.parent(p,c);
s.parent(c,a);
//設置默認值
s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});
s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});
s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});
</script>

第四步：

下載附件兩個JS上傳到e/admin/ JS為UTF-8編碼，其他請自己轉碼

到此后臺已經實現添加內容三級聯動

在前臺顯示位置添加一下代碼可篩選查

<script type="text/javascript" src="[!--news.url--]js/selects.js"></script>
       <script type="text/javascript" src="[!--news.url--]js/data_china.js"></script>
          
               <form method="get" action="[!--news.url--]e/action/ListInfo.php">
               <input value="10" type="hidden" name="mid">
              <input value="17" type="hidden" name="classid">
              <input value="1" type="hidden" name="ph">
              <input value="12" type="hidden" name="tempid">
                 
                <select name="pro"></select>
                 <select name="city"></select>
                 <select name="area"></select>
                 <INPUT value="確定" type="submit" name="提交">
                </FORM>
            <script type="text/javascript">
var s = selects;
//獲取對象
var p = document.getElementsByName('pro')[0];//省
var c = document.getElementsByName('city')[0];//市
var a = document.getElementsByName('area')[0];//區
//綁定數據
s.bind(p,province);
s.bind(c,city);
s.bind(a,area);
//確定從屬關系
s.parent(p,c);
s.parent(c,a);
//設置默認值
s.selected(p,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[pro]))?>'});
s.selected(c,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[city]))?>'});
s.selected(a,{value:'<?=$ecmsfirstpost==1?"":htmlspecialchars(stripSlashes($r[area]))?>'});
</script>