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


细节有空再补上了。 ,服务器空间,网站空间
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Comment utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante de liaison à plusieurs niveaux Comment utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante de liaison à plusieurs niveaux Jul 20, 2023 pm 11:43 PM

Comment utiliser Vue et Element-UI pour implémenter la fonction de liste déroulante à plusieurs niveaux Introduction : Dans le développement Web, la liste déroulante de liaison à plusieurs niveaux est une méthode d'interaction courante. En sélectionnant une option dans une liste déroulante, le contenu des listes déroulantes suivantes peut être modifié de manière dynamique. Cet article expliquera comment utiliser Vue et Element-UI pour implémenter cette fonction et fournira des exemples de code. 1. Préparation Tout d'abord, nous devons nous assurer que Vue et Element-UI ont été installés. Il peut être installé via la commande suivante : npmins

Comment utiliser CSS pour créer un effet de style personnalisé pour une liste déroulante Comment utiliser CSS pour créer un effet de style personnalisé pour une liste déroulante Oct 26, 2023 pm 12:22 PM

Comment utiliser CSS pour créer un effet de style personnalisé pour une liste déroulante. Dans la conception Web, la liste déroulante (DropdownList) est l'un des éléments interactifs courants. Elle peut fournir la fonction de sélection d'options pour faciliter les opérations de l'utilisateur. Cependant, le style de liste déroulante par défaut du navigateur peut ne pas répondre aux besoins de conception. Vous devez donc utiliser CSS pour définir un style personnalisé. Cet article explique comment utiliser CSS pour créer des effets de style personnalisés pour les listes déroulantes, avec des exemples de code spécifiques. Création de la structure HTML de base Tout d'abord, je

Comment lier des données dans une liste déroulante Comment lier des données dans une liste déroulante Jan 23, 2024 pm 04:34 PM

Méthode de liaison : 1. Utilisez la propriété DataSource pour lier les données : définissez la source de données sur la propriété DataSource de DropDownList et appelez la méthode DataBind() pour lier les données 2. Utilisez la méthode DataBind() pour lier les données : utilisez directement DataBind ; () méthode Liaison ; 3. Utilisez le contrôle SqlDataSource pour lier les données ; 4. Utilisez Entity Framework pour lier les données ;

Comment gérer les requêtes de liaison multi-niveaux et de fédération de données des données de formulaire en Java ? Comment gérer les requêtes de liaison multi-niveaux et de fédération de données des données de formulaire en Java ? Aug 10, 2023 am 11:45 AM

Comment gérer les requêtes de liaison multi-niveaux et de fédération de données des données de formulaire en Java ? Dans le développement d'applications Web, la liaison multi-niveaux des données de formulaire et la requête de données conjointe sont des exigences très courantes. En tant que langage de programmation largement utilisé, Java fournit des fonctions et des outils riches pour répondre à ces exigences. Cet article explique comment gérer les liaisons multi-niveaux et les requêtes de fédération de données des données de formulaire en Java, et fournit des exemples de code correspondants. 1. Lien multi-niveaux Le lien multi-niveaux signifie que lorsque l'utilisateur sélectionne une option dans la liste déroulante du premier niveau, le contenu de la liste déroulante du niveau suivant sera

Comment implémenter un menu de liaison à plusieurs niveaux dans Vue ? Comment implémenter un menu de liaison à plusieurs niveaux dans Vue ? Jun 25, 2023 pm 07:37 PM

Vue.js est un framework frontal populaire et de nombreux sites Web utilisent Vue.js pour développer des interfaces utilisateur interactives. Un composant courant de l'interface utilisateur est un menu à plusieurs niveaux (également appelé sélecteur en cascade), qui permet aux utilisateurs de filtrer une liste d'une option en sélectionnant une autre option, permettant ainsi des capacités de recherche ou de navigation plus granulaires. Dans cet article, nous présenterons comment utiliser Vue.js pour implémenter un menu de liaison à plusieurs niveaux. Préparation Avant de commencer, nous devons nous assurer que Vue.js est installé.

Comment utiliser la liste déroulante Comment utiliser la liste déroulante Dec 12, 2023 pm 02:41 PM

Dans le développement front-end, une liste déroulante est souvent utilisée pour afficher un ensemble d'options et permettre à l'utilisateur d'en sélectionner une. La partie HTML définit une Dropdownlist, qui contient trois options. La partie JavaScript montre comment obtenir la valeur de Dropdownlist et comment écouter l'événement de changement de Dropdownlist. De plus, l'utilisation de Dropdownlist peut varier en fonction du framework front-end ou de la bibliothèque spécifique.

Développement de composants Vue : implémentation d'un sélecteur de liaison multi-niveaux Développement de composants Vue : implémentation d'un sélecteur de liaison multi-niveaux Nov 24, 2023 am 08:36 AM

Développement de composants Vue : implémentation d'un sélecteur de liaison à plusieurs niveaux Dans le développement frontal, le sélecteur de liaison à plusieurs niveaux est une exigence courante, comme la sélection de la province et de la ville, la sélection de l'année, du mois et du jour, etc. Cet article expliquera comment utiliser les composants Vue pour implémenter des sélecteurs de liaison multi-niveaux, avec des exemples d'implémentation de code spécifiques. Comment implémenter un sélecteur de liens multi-niveaux ? La mise en œuvre de sélecteurs de liaison multi-niveaux nécessite l'utilisation de l'idée de développement de composants de Vue, qui divise un grand sélecteur en plusieurs sous-composants, responsables du rendu de chaque niveau d'options. Chaque fois que la sélection de niveau change, le prochain

Traitement des formulaires PHP : conseils sur l'utilisation des cases à sélection multiple, des boutons radio et des listes déroulantes Traitement des formulaires PHP : conseils sur l'utilisation des cases à sélection multiple, des boutons radio et des listes déroulantes Aug 07, 2023 pm 11:29 PM

Traitement des formulaires PHP : conseils pour l'utilisation des cases à sélection multiple, des boutons radio et des listes déroulantes Dans le développement Web, les formulaires sont l'un des moyens importants permettant aux utilisateurs d'interagir avec le site Web. Les cases à sélection multiple, les boutons radio et les listes déroulantes du formulaire sont des options de saisie utilisateur courantes. Cet article explique comment utiliser PHP pour traiter ces éléments de formulaire et donne des exemples de code correspondants. Boîte à sélection multiple Une boîte à sélection multiple permet à l'utilisateur de sélectionner plusieurs options. En HTML, vous pouvez utiliser <inputtype="checkbox"&g

See all articles