今天魔酷閣給大家分享一款帝國(guó)cms的三級(jí)聯(lián)動(dòng)插件，優(yōu)勢(shì)是可以自己設(shè)定區(qū)域，修改相關(guān)地區(qū)數(shù)據(jù)，接下來(lái)我們看一下使用步驟。

第一步：后臺(tái)添加三個(gè)數(shù)據(jù)表字段

字段名：pro   字段標(biāo)識(shí)：省    輸入表單替換html代碼為如下代碼：  

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

字段名：city  字段標(biāo)識(shí)：市    輸入表單替換html代碼：

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

字段名：area  字段標(biāo)識(shí)：縣    輸入表單替換html代碼：

第二步：建立完畢后，在到 管理系統(tǒng)模型  設(shè)置上邊添加的三個(gè)字段設(shè)為 提交項(xiàng)，可添加、修改、列表顯示、內(nèi)容頁(yè)顯示、結(jié)合項(xiàng)，并生成相應(yīng)的表單！

第三步：打開e/admin/AddNews.php   把以下代碼粘貼到  結(jié)尾的隨便位置即可

<script type="text/javascript" src="selects.js"></script>  <script type="text/javascript" src="data_china.js"></script>  <script type="text/javascript">  var s = selects;  //獲取對(duì)象  var p = document.getElementsByName('pro')[0];//省  var c = document.getElementsByName('city')[0];//市  var a = document.getElementsByName('area')[0];//區(qū)  //綁定數(shù)據(jù)  s.bind(p,province);  s.bind(c,city);  s.bind(a,area);  //確定從屬關(guān)系  s.parent(p,c);  s.parent(c,a);  //設(shè)置默認(rèn)值  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>  

 另外，也可以把上述代碼放到相應(yīng)模型的輸入表單里，比修改文件更方便一些。

第四步：下載附件兩個(gè)JS文件上傳到e/admin/文件夾，此處為UTF-8編碼格式，如果需要gbk或其他編碼請(qǐng)自己轉(zhuǎn)碼。

執(zhí)行到這里，我們已經(jīng)可以在后臺(tái)添加信息時(shí)選擇地區(qū)聯(lián)動(dòng)了。

但前臺(tái)頁(yè)面上還沒有地區(qū)選擇功能，我們可以在需要的頁(yè)面添加如下代碼，來(lái)實(shí)現(xiàn)地區(qū)的篩選，此處利用了帝國(guó)cms的結(jié)合項(xiàng)來(lái)進(jìn)行篩選。

<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;  //獲取對(duì)象  var p = document.getElementsByName('pro')[0];//省  var c = document.getElementsByName('city')[0];//市  var a = document.getElementsByName('area')[0];//區(qū)  //綁定數(shù)據(jù)  s.bind(p,province);  s.bind(c,city);  s.bind(a,area);  //確定從屬關(guān)系  s.parent(p,c);  s.parent(c,a);  //設(shè)置默認(rèn)值  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>  

至此我們的設(shè)置就完成了，這里尤其要注意的就是引入的js文件路徑一定要正確，否則會(huì)造成功能無(wú)法使用喲！

在前臺(tái)的篩選表單里邊有幾個(gè)參數(shù)，大家需要注意：四個(gè)默認(rèn)字段中mid指的是模型ID，classid是欄目ID，tempid是篩選列表所使用的模板ID（列表頁(yè)模板），ph是使用結(jié)合項(xiàng)，ph參數(shù)是必須等于1的，表示使用結(jié)合項(xiàng)，否則不能篩選

下面是使用篩選功能的頁(yè)面示例，大家可以參考。