ホームページ php教程 php手册 下拉列表多级联动dropDownList示例代码

下拉列表多级联动dropDownList示例代码

Jun 06, 2016 pm 08:29 PM
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'];
}


其它:
数据表结构
效果:
没有选择节点前:

下拉列表多级联动dropDownList示例代码


细节有空再补上了。 ,服务器空间,网站空间
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

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

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

VueとElement-UIを使って多階層連携ドロップダウンボックス機能を実装する方法 VueとElement-UIを使って多階層連携ドロップダウンボックス機能を実装する方法 Jul 20, 2023 pm 11:43 PM

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

CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法 CSS を使用してドロップダウン リストのカスタム スタイル効果を作成する方法 Oct 26, 2023 pm 12:22 PM

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

ドロップダウンリストにデータをバインドする方法 ドロップダウンリストにデータをバインドする方法 Jan 23, 2024 pm 04:34 PM

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

Vueでマルチレベル連携メニューを実装するにはどうすればよいですか? Vueでマルチレベル連携メニューを実装するにはどうすればよいですか? Jun 25, 2023 pm 07:37 PM

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

Java でフォーム データのマルチレベル リンクとデータ フェデレーション クエリを処理するにはどうすればよいですか? Java でフォーム データのマルチレベル リンクとデータ フェデレーション クエリを処理するにはどうすればよいですか? Aug 10, 2023 am 11:45 AM

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

ドロップダウンリストの使い方 ドロップダウンリストの使い方 Dec 12, 2023 pm 02:41 PM

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

Vue コンポーネント開発: マルチレベル リンケージ セレクターの実装 Vue コンポーネント開発: マルチレベル リンケージ セレクターの実装 Nov 24, 2023 am 08:36 AM

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

PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント PHP フォーム処理: 複数選択ボックス、ラジオ ボタン、ドロップダウン リストの使用に関するヒント Aug 07, 2023 pm 11:29 PM

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

See all articles