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

Outils d'IA chauds

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

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

Undress AI Tool
Images de déshabillage gratuites

Clothoff.io
Dissolvant de vêtements AI

AI Hentai Generator
Générez AI Hentai gratuitement.

Article chaud

Outils chauds

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

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 à 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. 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

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 ? 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

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é.

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 à 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 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
