php 下拉式清單多級聯動dropDownList範例程式碼

DropDownList控制項又稱下拉式清單方塊控制項， 控制項 列表 中的多行數 據 以隱含 的形式表 示 出 來，當使用者需要選擇所需清單項目時，通過點擊 “下三角 ”圖形 展示 ，使用者每次 只能選用一個 資料項目。DropDownList控制項實際上是清單項目 的 容器 ，下拉式清單方塊 用 Items集合表示各項 的內 容。如果在 ASP．NET頁面中逐個 的手 動填寫 DropDownList控制項的列表選項，當清單項目很多 的時候會 比較繁瑣 ，而且修改 比較麻煩 。 DropDownList控制項動態串連到資料庫，按指定 條件從資料庫 中查詢 出列表選項資料，然後綁 定到控制項，可以方便快速地顯示出多個下拉選 項 。 同時 ，通過修 改資料庫 中資料 ，可 以動 態改 變下 拉選項。例如 ，在導 師遴 選系統 中， 研究生導師填寫申請資訊 的時候 ，需要選 擇申 請類型，而且同樣的資訊在多處頁面出現，將 資料庫中申請類型表的資料繫結到 DropDownList控制項上，能比較好的解決問題。

本文為大家詳細介紹下下拉式清單多級聯動 dropDownList具體的實現代碼

視圖：
cdnauto/views/config/index.php

代碼如下:

echo CHtml::dropDownList('node', '', CHtml::listData(Node::model()->findAll(),'name','name'),array('empty'=>'--請選擇節點--', 'id' => 'node', 'ajax'=>array( 'type'=>'POST', 'url'=>Yii::app()->createUrl('cdnauto/config/getNodeServersByNodeName'), 'update'=>'#servers', 'data'=>array('node_name'=>'js:$("#node").val()'), ) ) ); echo "        "; echo CHtml::dropDownList('servers', '', array('--請選擇伺服器--'));

控制器：
cdnauto/controllers/ConfigController.php

public function actionGetNodeServersByNodeName(){ // if(!Yii::app()->request->isAjaxRequest) // throw new CHttpException(404); $node_name = $_POST['node_name']; $nodeid = Node::model()->getNodeId($_POST['node_name']); //通過節點名稱擷取該節點ID $server = GossServer::model()->getServerByNodeid($nodeid); //通過節點ID擷取伺服器資訊 //$server 為array類型，形如 $server = array(array('name'=>'name1'),array('name'=>'name2'));所以需要兩次foreach if(isset($server)){ foreach ($server as $k=>$v){ foreach($v as $kk => $vv){ echo CHtml::tag('option', array('value'=>$kk), CHtml::encode($vv), true); } } }else{ echo CHtml::tag('option', array('value'=>''), 'servers', true); } }

模型：
GossServer.php

/** * 通過節點ID擷取該節點下所有的伺服器名稱 * @author ysdaniel */ public static function getServerByNodeid($nodeid) { $sql = "SELECT name FROM OSS_Server WHERE nodeid = '{$nodeid}' "; ///$sql = "SELECT name,nodeid FROM OSS_Server WHERE nodeid = '{$nodeid}' "; //both ok $cmd = Yii::app()->db->createCommand($sql); $ret = $cmd->queryAll(); if (!$ret){ throw new Exception("找不到這個節點對應的伺服器"); } return $ret; }

Node.php

/** * 通過nodename擷取nodeid名 * @author */ public static function getNodeId($name) { $sql = "SELECT id FROM OSS_Node WHERE name = '{$name}'"; $cmd = Yii::app()->db->createCommand($sql); $ret = $cmd->queryAll(); if (!$ret){ return null; //throw new Exception("找不到Node{$name}"); } return $ret[0]['id']; }

其它：
資料表結構
效果：
沒有選擇節點前：