js_案例_下拉联动

拼搏现实的明天。 2022-05-25 05:47 175阅读 0赞

1) 下拉框联动

需求：有两个下拉框：省份、城市。选择省份后更新城市下拉框的内容。

先在界面中定义两个下拉框：

<select id="province" onchange="citychange(this)"></select>

<select id="city"></select>

在页面加载结束后给省下拉框添加内容。

<body onload="province()">

添加下拉内容有两种方式：

1是直接将标签全组织为字串，赋值给province标签。使用dom.innerHTML=””;

2是使用document.createElement("option");再使用Dom.appendChild(“”);

function province()\{

var selectDom = document.getElementById("province");

var arr = \[\{"id":1001,"name":"湖南省"\},\{"id":1002,"name":"湖北省"\}\];

/\* 方法一

var html = "<option value=''>--请选择--</option>";

for(var i=0;i<arr.length;i++)\{

html += "<option value='"+arr\[i\].id+"'>"+arr\[i\].name+"</option>";

\}

selectDom.innerHTML = html;

\*/

var optionEmpty = document.createElement("option");

optionEmpty.value = "";

optionEmpty.text = "--请选择--";

selectDom.appendChild(optionEmpty);

for(var i = 0; i < arr.length; i++)\{

var option = document.createElement("option");

option.value = arr\[i\].id;

option.text = arr\[i\].name;

selectDom.appendChild(option);

\}

\};

第一个下拉框内容有变化时调用citychange方法：

//城市数据

var cityDatas = \{

"1001":"100101\#长沙,100102\#郴州,100103\#株洲",

"1002":"100201\#武汉,100202\#天门,10023\#宜昌"

\};

function citychange(obj)\{

var value = obj.value;

var datas = cityDatas\[value\];

var cityDom = document.getElementById("city");

cityDom.innerHTML = "";

var optionEmpty = document.createElement("option");

optionEmpty.value = "";

optionEmpty.text = "--请选择--";

cityDom.appendChild(optionEmpty);

if(datas)\{

var citys = datas.split(",");

for(var i=0;i<citys.length;i++)\{

var option = document.createElement("option");

var v = citys\[i\].split("\#");

option.value = v\[0\];

option.text = v\[1\];

cityDom.appendChild(option);

\}

\}

\};

结果如下：

![20180509092416278][]

[20180509092416278]: /images/20220525/86ada4d07436485ea1a9f0c8029055a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，175人围观）

还没有评论，来说两句吧...

相关阅读

相关二级联动下拉列表

二级联动下拉列表需先选择英雄,才能在选择英雄的皮肤 html页面 <!DOCTYPE html> <html> <head>

忘是亡心i/ 2023年01月09日 12:36/ 0 赞/ 150 阅读

相关 Mybatis + js 实现下拉列表二级联动

Mybatis + js 实现下拉列表二级联动学习内容：一、业务需求二、实现效果三、代

太过爱你忘了你带给我的痛/ 2022年10月06日 04:58/ 0 赞/ 227 阅读

相关 javascrip实现下拉框联动

实际项目中几个下拉框需要联动是经常需要实现的功能. 一般的实现方法是定义几个多维数组,利用数组的下标找到与上个下拉框的关系实现下拉框的联动. 不妨定义几个js的数据对

忘是亡心i/ 2022年09月18日 09:47/ 0 赞/ 177 阅读

相关 html年月日下拉联动菜单年月日三下拉框联动

<html> <head> <title>年月日三下拉框联动</title> <meta http-equiv='Content-Type' c

末蓝、/ 2022年06月08日 06:54/ 0 赞/ 561 阅读

相关 js下拉列表二级联动

学了JS也有一段时间了，今天把JS中较为重要的下拉列表二级联动记录一下。所谓二级联动，就是要通过一个下拉列表的选择从而在另一个select下拉列表中显示出对应的数据。好比我有

刺骨的言语ヽ痛彻心扉/ 2022年06月01日 04:41/ 0 赞/ 409 阅读

相关 js_案例_下拉联动

1) 下拉框联动需求：有两个下拉框：省份、城市。选择省份后更新城市下拉框的内容。先在界面中定义两个下拉框： <select id="province" onchang

拼搏现实的明天。/ 2022年05月25日 05:47/ 0 赞/ 176 阅读

相关 js快速实现省市级二级联动下拉框

由于逻辑简单，可以快速实现，我就直接上代码了。目前来说数据都应在数据库中，这个是偶然发现的一个代码，所以记录一下，以防万一使用； html部分 <div cla

梦里梦外;/ 2022年03月06日 10:22/ 0 赞/ 473 阅读

相关下拉框联动jquery\js例子

下拉框联动jquery\\js例子具体代码如下： $(window).load(function () { // 父级下拉框修改时，根据

小咪咪/ 2021年12月11日 08:45/ 0 赞/ 338 阅读

相关 AJAX多级下拉联动【JSON】

前言前面我们已经使用过了XML作为数据载体在AJAX中与服务器进行交互。当时候我们的案例是二级联动，使用Servlet进行控制这次我们使用JSON作为数据载体在AJ

布满荆棘的人生/ 2021年09月17日 06:42/ 0 赞/ 396 阅读

相关 JavaScript 下拉框联动案例

功能描述页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。 ![在这里插入图片描述][watermar

小灰灰/ 2021年06月24日 16:10/ 0 赞/ 515 阅读