下拉列表多级联动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'];
}
其它:
数据表结构
效果:
没有选择节点前:
细节有空再补上了。 ,服务器空间,网站空间

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック

Vue と Element-UI を使用してマルチレベルのドロップダウン ボックス機能を実装する方法 はじめに: Web 開発では、マルチレベルのリンク ドロップダウン ボックスは一般的な対話方法です。ドロップダウン ボックスでオプションを選択すると、後続のドロップダウン ボックスの内容を動的に変更できます。この記事では、Vue と Element-UI を使用してこの機能を実装する方法とコード例を紹介します。 1. 準備 まず、Vue と Element-UI がインストールされていることを確認する必要があります。次のコマンドを使用してインストールできます: npmins

CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法。Web デザインでは、ドロップダウン リスト (DropdownList) は一般的な対話型要素の 1 つです。ユーザーの操作を容易にするオプションの選択機能を提供します。ただし、ブラウザのデフォルトのドロップダウン リスト スタイルはデザインのニーズを満たしていない可能性があるため、CSS を使用してカスタム スタイルを設定する必要があります。この記事では、CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法を、具体的なコード例とともに紹介します。基本的な HTML 構造の作成 まず、

バインド方法: 1. DataSource プロパティを使用してデータをバインドします: データ ソースを DropDownList の DataSource プロパティに設定し、DataBind() メソッドを呼び出してデータをバインドします。 2. DataBind() メソッドを使用してデータをバインドします: DataBind を直接使用します。 () メソッド Binding; 3. SqlDataSource コントロールを使用してデータをバインドする; 4. Entity Framework を使用してデータをバインドする; 5. LINQ to Entities を使用してバインドする

Vue.js は人気のあるフロントエンド フレームワークであり、多くの Web サイトが Vue.js を使用してインタラクティブ UI を開発しています。一般的な UI コンポーネントの 1 つはマルチレベル メニュー (カスケード セレクターとも呼ばれます) です。これにより、ユーザーは別のオプションを選択することで 1 つのオプションのリストをフィルターでき、より詳細な検索またはナビゲーション機能が可能になります。この記事では、Vue.jsを使って多階層連携メニューを実装する方法を紹介します。準備 始める前に、Vue.js がインストールされていることを確認する必要があります。

Java でフォーム データのマルチレベル リンクとデータ フェデレーション クエリを処理するにはどうすればよいですか? Web アプリケーション開発では、フォーム データの多層連携と共同データ クエリが非常に一般的な要件です。 Java は広く使用されているプログラミング言語として、これらの要件に対処するための豊富な機能とツールを提供します。この記事では、Java でフォーム データのマルチレベル リンクとデータ フェデレーション クエリを処理する方法と、対応するコード例を紹介します。 1. 複数レベルの連携 複数レベルの連携とは、ユーザーが最初のレベルのドロップダウン ボックスでオプションを選択すると、次のレベルのドロップダウン ボックスの内容が次のレベルのドロップダウン ボックスに反映されることを意味します。

フロントエンド開発では、ドロップダウンリストはオプションのセットを表示し、ユーザーがそれらからオプションを選択できるようにするためによく使用されます。 HTML 部分は、3 つのオプションを含むドロップダウンリストを定義します。 JavaScript 部分では、Dropdownlist の値を取得する方法と、Dropdownlist の変更イベントをリッスンする方法を示します。さらに、ドロップダウンリストの使用法は、特定のフロントエンド フレームワークまたはライブラリによって異なる場合があります。

Vue コンポーネント開発: マルチレベル リンケージ セレクターの実装 フロントエンド開発では、州と都市の選択、年、月、日の選択など、マルチレベル リンケージ セレクターが一般的な要件です。この記事では、Vue コンポーネントを使用してマルチレベル リンケージ セレクターを実装する方法を、具体的なコード実装例とともに紹介します。マルチレベルリンケージセレクターを実装するにはどうすればよいですか?マルチレベルのリンケージ セレクターを実装するには、Vue のコンポーネント開発アイデアを使用する必要があります。これは、大きなセレクターをいくつかのサブコンポーネントに分割し、各レベルのオプションのレンダリングを担当します。レベルの選択が変更されるたびに、次のレベルの選択が変更されます。

PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント Web 開発において、フォームはユーザーが Web サイトと対話するための重要な方法の 1 つです。フォーム内の複数選択ボックス、ラジオ ボタン、ドロップダウン リストは、一般的なユーザー入力オプションの一部です。この記事では、PHP を使用してこれらのフォーム要素を処理する方法と、対応するコード例を紹介します。複数選択ボックス 複数選択ボックスを使用すると、ユーザーは複数のオプションを選択できます。 HTML では、<inputtype="checkbox"&g を使用できます。
