帝國CMS7.5實現地區三級聯動並且前台可地區篩選的教程

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

第一步：后台添加三個數據表字段

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

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

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

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

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

<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編碼，其他請自己轉碼

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

 

 

 

在前台顯示位置添加一下代碼可篩選查，注意兩個JS路徑

<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>

注：四個默認字段mid是模型ID，classid是欄目ID，tempid是列表所使用的模板標簽ID，ph是結合項，ph參數是必須等於1的，表示使用結合項，否則不能篩選

 

JS代碼下載：下載