Heim 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示例代码


细节有空再补上了。 ,服务器空间,网站空间
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Vue und Element-UI, um die Dropdown-Box-Funktion für mehrstufige Verknüpfungen zu implementieren So verwenden Sie Vue und Element-UI, um die Dropdown-Box-Funktion für mehrstufige Verknüpfungen zu implementieren Jul 20, 2023 pm 11:43 PM

So verwenden Sie Vue und Element-UI zum Implementieren der mehrstufigen Dropdown-Box-Funktion Einführung: In der Webentwicklung ist die mehrstufige Verknüpfung von Dropdown-Boxen eine gängige Interaktionsmethode. Durch Auswahl einer Option in einem Dropdown-Feld kann der Inhalt nachfolgender Dropdown-Felder dynamisch geändert werden. In diesem Artikel wird erläutert, wie Sie mit Vue und Element-UI diese Funktion erreichen, und es werden Codebeispiele bereitgestellt. 1. Vorbereitung Zunächst müssen wir sicherstellen, dass Vue und Element-UI installiert wurden. Es kann über den folgenden Befehl installiert werden: npmins

So erstellen Sie mit CSS einen benutzerdefinierten Stileffekt für eine Dropdown-Liste So erstellen Sie mit CSS einen benutzerdefinierten Stileffekt für eine Dropdown-Liste Oct 26, 2023 pm 12:22 PM

So erstellen Sie mit CSS einen benutzerdefinierten Stileffekt für eine Dropdown-Liste. Im Webdesign ist die Dropdown-Liste (DropdownList) eines der häufigsten interaktiven Elemente. Sie kann die Auswahlfunktion von Optionen bereitstellen, um Benutzervorgänge zu erleichtern. Der Standard-Dropdown-Listenstil des Browsers entspricht jedoch möglicherweise nicht den Designanforderungen. Daher müssen Sie CSS verwenden, um einen benutzerdefinierten Stil festzulegen. In diesem Artikel wird anhand spezifischer Codebeispiele erläutert, wie Sie mithilfe von CSS benutzerdefinierte Stileffekte für Dropdown-Listen erstellen. Erstellen der grundlegenden HTML-Struktur Zuerst I

So binden Sie Daten in einer Dropdown-Liste So binden Sie Daten in einer Dropdown-Liste Jan 23, 2024 pm 04:34 PM

Bindungsmethode: 1. Verwenden Sie die DataSource-Eigenschaft, um Daten zu binden: Legen Sie die Datenquelle auf die DataSource-Eigenschaft von DropDownList fest und rufen Sie die DataBind()-Methode auf, um Daten zu binden. 2. Verwenden Sie die DataBind()-Methode, um Daten zu binden: Verwenden Sie DataBind direkt () Methode Binding; 3. Verwenden Sie das SqlDataSource-Steuerelement, um Daten zu binden. 4. Verwenden Sie Entity Framework, um Daten zu binden

Wie implementiert man ein mehrstufiges Verknüpfungsmenü in Vue? Wie implementiert man ein mehrstufiges Verknüpfungsmenü in Vue? Jun 25, 2023 pm 07:37 PM

Vue.js ist ein beliebtes Front-End-Framework und viele Websites verwenden Vue.js, um interaktive Benutzeroberflächen zu entwickeln. Eine häufige UI-Komponente ist ein mehrstufiges Menü (auch kaskadierender Selektor genannt), mit dem Benutzer eine Liste einer Option filtern können, indem sie eine andere Option auswählen, was detailliertere Such- oder Navigationsmöglichkeiten ermöglicht. In diesem Artikel stellen wir vor, wie Sie mit Vue.js ein mehrstufiges Verknüpfungsmenü implementieren. Vorbereitung Bevor wir beginnen, müssen wir sicherstellen, dass Vue.js installiert ist.

So verwenden Sie Dropdownlist So verwenden Sie Dropdownlist Dec 12, 2023 pm 02:41 PM

In der Frontend-Entwicklung wird häufig eine Dropdown-Liste verwendet, um eine Reihe von Optionen anzuzeigen und dem Benutzer die Auswahl einer Option daraus zu ermöglichen. Der HTML-Teil definiert eine Dropdownliste, die drei Optionen enthält. Der JavaScript-Teil zeigt, wie man den Wert von Dropdownlist erhält und wie man auf das Änderungsereignis von Dropdownlist hört. Darüber hinaus kann die Verwendung von Dropdownlist je nach spezifischem Front-End-Framework oder Bibliothek variieren.

Wie gehe ich mit der mehrstufigen Verknüpfung und Datenföderationsabfrage von Formulardaten in Java um? Wie gehe ich mit der mehrstufigen Verknüpfung und Datenföderationsabfrage von Formulardaten in Java um? Aug 10, 2023 am 11:45 AM

Wie gehe ich mit der mehrstufigen Verknüpfung und Datenföderationsabfrage von Formulardaten in Java um? Bei der Entwicklung von Webanwendungen sind die mehrstufige Verknüpfung von Formulardaten und die gemeinsame Datenabfrage sehr häufige Anforderungen. Als weit verbreitete Programmiersprache bietet Java umfangreiche Funktionen und Tools zur Bewältigung dieser Anforderungen. In diesem Artikel wird der Umgang mit mehrstufiger Verknüpfung und Datenföderationsabfrage von Formulardaten in Java vorgestellt und entsprechende Codebeispiele bereitgestellt. 1. Verknüpfung auf mehreren Ebenen. Verknüpfung auf mehreren Ebenen bedeutet, dass, wenn der Benutzer eine Option im Dropdown-Feld der ersten Ebene auswählt, der Inhalt des Dropdown-Felds der nächsten Ebene angezeigt wird

Entwicklung von Vue-Komponenten: Implementierung eines mehrstufigen Linkage-Selektors Entwicklung von Vue-Komponenten: Implementierung eines mehrstufigen Linkage-Selektors Nov 24, 2023 am 08:36 AM

Entwicklung von Vue-Komponenten: Implementierung eines mehrstufigen Verknüpfungsselektors In der Front-End-Entwicklung ist ein mehrstufiger Verknüpfungsselektor eine häufige Anforderung, z. B. die Auswahl von Provinzen und Städten, die Auswahl von Jahr, Monat und Tag usw. In diesem Artikel wird anhand spezifischer Code-Implementierungsbeispiele erläutert, wie Vue-Komponenten zum Implementieren mehrstufiger Verknüpfungsselektoren verwendet werden. Wie implementiert man einen mehrstufigen Verknüpfungsselektor? Die Implementierung mehrstufiger Verknüpfungsselektoren erfordert die Verwendung der Komponentenentwicklungsidee von Vue, die einen großen Selektor in mehrere Unterkomponenten aufteilt, die für die Darstellung jeder Optionsebene verantwortlich sind. Jedes Mal, wenn sich die Ebenenauswahl ändert, ändert sich die nächste

PHP-Formularverarbeitung: Tipps zur Verwendung von Mehrfachauswahlfeldern, Optionsfeldern und Dropdown-Listen PHP-Formularverarbeitung: Tipps zur Verwendung von Mehrfachauswahlfeldern, Optionsfeldern und Dropdown-Listen Aug 07, 2023 pm 11:29 PM

PHP-Formularverarbeitung: Tipps zur Verwendung von Mehrfachauswahlfeldern, Optionsfeldern und Dropdown-Listen In der Webentwicklung sind Formulare eine der wichtigen Möglichkeiten für Benutzer, mit der Website zu interagieren. Die Mehrfachauswahlfelder, Optionsfelder und Dropdown-Listen im Formular sind einige gängige Benutzereingabeoptionen. In diesem Artikel wird die Verwendung von PHP zur Verarbeitung dieser Formularelemente vorgestellt und entsprechende Codebeispiele gegeben. Mehrfachauswahlfeld Mit einem Mehrfachauswahlfeld kann der Benutzer mehrere Optionen auswählen. In HTML können Sie <inputtype="checkbox"&g verwenden

See all articles