Maison interface Web js tutoriel js操作二级联动实现代码_javascript技巧

js操作二级联动实现代码_javascript技巧

May 16, 2016 pm 06:22 PM

表结构
二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外
id,parent_id,name 三列。

采用js操作
先说下数据在js中的存储方式。
主要用二维数组来存储数据。结构如下:
a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],……];
首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中

第一步 二级联动数据(后面说这些数据怎么得到)
复制代码 代码如下:

var cities=new Array();
cities['00000000-0000-0000-0000-000000000000']=[['028db215-8bd7-45ab-bbaa-1efa175c35ca','长春'],['bcb32195-2a46-4cd1-9472-6383e8fa55cc','沈阳']];

var schools=new Array();
schools['028db215-8bd7-45ab-bbaa-1efa175c35ca']=[['5f22403a-7a59-4b7f-b62d-9451298cbd00','长春1'],['e8f0f665-9a9a-4c44-83fd-598e8a28dcd7','长春2']];
schools['bcb32195-2a46-4cd1-9472-6383e8fa55cc']=[['4a743dbf-1fdc-4907-a44e-8d169d715664','沈阳1']];

第一级为城市数据,第二级为学校数据。
第二步 设置数据在dropdown中显示


复制代码 代码如下:

//根据父编号获取相应的子数据,并显示在obj控件中
//type=0 城市,1学校
//pid 父编号
//obj 要显示数据的dropdown
function SetRegions(type,pid,obj)
{
var text="";
var tempArray=new Array();
if(type==0){
tempArray=cities[pid];
} else if (type==1){
tempArray=schools[pid];;
}
if(tempArray!=null)
{
for(var i=0;itext+="";
}
}
$(obj).html(text);
}


第三步 城市改变的时候 选择学校数据

复制代码 代码如下:

//用城市编号设置学校子数据
function CityChanged(){
SetRegions (1,$("#cities").val(),"#schools");
}


第四步 当然在修改的时候需要进行初始化,这也是以前我最头疼的问题

复制代码 代码如下:

//初始化 城市 学校值
//cityId 城市编号
//schoolId 学校编号
function InitRegions(cityId,schoolId)
{
//初始化城市数据
//SetRegions(0,"00000000-0000-0000-0000-000000000000","#cities");
//查找城市并设为默认值
$("#cities option[value="+cityId+"]").attr("selected","selected");
if(schoolId!="00000000-0000-0000-0000-000000000001"){
//初始化学校数据
SetRegions(1,cityId,"#schools");
//查找学校并设为默认值
$("#schools option[value="+schoolId+"]").attr("selected","selected");
}
}


前台代码
复制代码 代码如下:








后台使用
后台初始化

复制代码 代码如下:

Literal_cityId.Text = "";//初始化城市id
Literal_schoolId.Text = "";//初始化学校id

后台获取选择项值

复制代码 代码如下:

string cityId = Request.Form["cities"] == null ? “00000000-0000-0000-0000-000000000001”: Request.Form["cities"];
string schoolId = Request.Form["schools"] == null ? “00000000-0000-0000-0000-000000000001”: Request.Form["schools"];



至此基本就完事了
现在看看如何获取js联动数据文件

复制代码 代码如下:

///
/// 生成区域js文件
///

private void CreateRegions()
{
#region 获取区域文件信息
string _cities = "var cities=new Array();
";
string _schools = "var schools=new Array();
";
DAL.RegionInfo dalRegion = new DAL.RegionInfo();
#region 城市信息
DataTable dtcity = dalRegion.GetList("parent_id='" + “00000000-0000-0000-0000-000000000000”+ "'").Tables[0];
_cities += "cities['" + ParentId + "']=[";
foreach (DataRow c in dtcity.Rows)
{
_cities += "['" + c["id"].ToString() + "','" + c["name"].ToString() + "'],";
#region 学校信息
DataTable dtschool = dalRegion.GetList(" parent_id='" + c["id"] + "'").Tables[0];
if (dtschool == null || dtschool.Rows.Count == 0)
{
continue;
}
_schools += "schools['" + c["id"].ToString() + "']=[";
foreach (DataRow s in dtschool.Rows)
{
_schools += "['" + s["id"].ToString() + "','" + s["name"].ToString() + "'],";
}
_schools = _schools.TrimEnd(',') + "];
";
#endregion
}
_cities = _cities.TrimEnd(',') + "];
";
#endregion
Response.Write(_cities + "

");
Response.Write(_schools + "

");
#endregion
}


把页面输出的js联动数据直接复制到js文件中即可
其中也可以根据自己需要改为三级、多级联动,都是一样的道理。
希望能对大家有帮助
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)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

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)

Remplacer les caractères de chaîne en javascript Remplacer les caractères de chaîne en javascript Mar 11, 2025 am 12:07 AM

Explication détaillée de la méthode de remplacement de la chaîne JavaScript et de la FAQ Cet article explorera deux façons de remplacer les caractères de chaîne dans JavaScript: le code JavaScript interne et le HTML interne pour les pages Web. Remplacer la chaîne dans le code JavaScript Le moyen le plus direct consiste à utiliser la méthode Remplace (): str = str.replace ("trouver", "remplacer"); Cette méthode remplace uniquement la première correspondance. Pour remplacer toutes les correspondances, utilisez une expression régulière et ajoutez le drapeau global G: str = str.replace (/ fi

Tutoriel de configuration de l'API de recherche Google personnalisé Tutoriel de configuration de l'API de recherche Google personnalisé Mar 04, 2025 am 01:06 AM

Ce tutoriel vous montre comment intégrer une API de recherche Google personnalisée dans votre blog ou site Web, offrant une expérience de recherche plus raffinée que les fonctions de recherche de thème WordPress standard. C'est étonnamment facile! Vous pourrez restreindre les recherches à Y

Créez vos propres applications Web Ajax Créez vos propres applications Web Ajax Mar 09, 2025 am 12:11 AM

Vous voici donc, prêt à tout savoir sur cette chose appelée Ajax. Mais qu'est-ce que c'est exactement? Le terme Ajax fait référence à un regroupement lâche de technologies utilisées pour créer un contenu Web interactif dynamique. Le terme Ajax, inventé à l'origine par Jesse J

Exemple Couleurs Fichier JSON Exemple Couleurs Fichier JSON Mar 03, 2025 am 12:35 AM

Cette série d'articles a été réécrite à la mi-2017 avec des informations à jour et de nouveaux exemples. Dans cet exemple JSON, nous examinerons comment nous pouvons stocker des valeurs simples dans un fichier à l'aide du format JSON. En utilisant la notation de paire de valeurs clés, nous pouvons stocker n'importe quel type

8 Superbes plugins de mise en page JQuery Page 8 Superbes plugins de mise en page JQuery Page Mar 06, 2025 am 12:48 AM

Tirez parti de jQuery pour les dispositions de page Web sans effort: 8 plugins essentiels JQuery simplifie considérablement la mise en page de la page Web. Cet article met en évidence huit puissants plugins jQuery qui rationalisent le processus, particulièrement utile pour la création de sites Web manuels

Qu'est-ce que & # x27; ceci & # x27; en javascript? Qu'est-ce que & # x27; ceci & # x27; en javascript? Mar 04, 2025 am 01:15 AM

Points de base Ceci dans JavaScript fait généralement référence à un objet qui "possède" la méthode, mais cela dépend de la façon dont la fonction est appelée. Lorsqu'il n'y a pas d'objet actuel, cela fait référence à l'objet global. Dans un navigateur Web, il est représenté par Window. Lorsque vous appelez une fonction, cela maintient l'objet global; mais lors de l'appel d'un constructeur d'objets ou de l'une de ses méthodes, cela fait référence à une instance de l'objet. Vous pouvez modifier le contexte de ceci en utilisant des méthodes telles que Call (), Appliquer () et Bind (). Ces méthodes appellent la fonction en utilisant la valeur et les paramètres donnés. JavaScript est un excellent langage de programmation. Il y a quelques années, cette phrase était

Améliorez vos connaissances jQuery avec le spectateur source Améliorez vos connaissances jQuery avec le spectateur source Mar 05, 2025 am 12:54 AM

JQuery est un excellent cadre JavaScript. Cependant, comme pour n'importe quelle bibliothèque, il est parfois nécessaire de passer sous le capot pour découvrir ce qui se passe. C'est peut-être parce que vous tracez un bug ou que vous êtes simplement curieux de savoir comment jQuery réalise une interface utilisateur particulière

10 feuilles de triche mobiles pour le développement mobile 10 feuilles de triche mobiles pour le développement mobile Mar 05, 2025 am 12:43 AM

Ce message compile des feuilles de triche utiles, des guides de référence, des recettes rapides et des extraits de code pour le développement d'Android, BlackBerry et Iphone. Aucun développeur ne devrait être sans eux! Guide de référence sur les gestes touchés (PDF) Une ressource précieuse pour Desig

See all articles