前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >新手编程1001问(2)

新手编程1001问(2)

作者头像
高一峰
发布2020-09-22 10:28:18
8K0
发布2020-09-22 10:28:18
举报
文章被收录于专栏:高渡号外
新手编程1001问(2)

Q:‍前端如何实现页面下拉框Select的联动?

A:上一期,我们回答了JS/JQuery如何获取下拉框选中的文本和值。那么今天的问题,我们可以继续聊聊下拉框了。

下拉框在前端设计中是一个很常用的列表控件。独立的下拉框要实现起来并不难。但是,有时候我们会遇到两个甚至多个下拉框需要联动的问题,这时候,页面的实现就不是一个简单的交互了。它需要我们根据上一个下拉框选中的值来动态更新下一个下拉框的列表。

因此,实现联动需要解决的问题关键在于,页面不刷新的情况下,能够根据上一个下拉框的值,获取下一个下拉框的列表数据,并更新到列表。

解决这个问题的关键方法分两步:

第一步:使用Ajax,页面不刷新,获取下一个下拉框的列表数据。

第二步:使用JQery,将Ajax获取的列表数据更新到指定的下拉框。

案例:页面上有Select1和Select2,需求是Select2的列表数据依赖于Select1选中的值。

先看Ajax代码:

$.Ajax‍({

url:“/myAction/getSelect”,

async:false,

type:”post”,

datatype:”json”,

data:{

//Select1的值提交到服务端

myval:$(“#Select1”.val())

},

success:function(data){

}

});

‍ 再看JQuery代码:

//首先清空Select2

$(“#Select2”).empty();

//先定义默认选项

("<option></option>").val("0").text("请选择...").appendTo(

//再将Ajax拿到的数据更新到Select2

.each(data, function (i, item) { ("<option></option>").val(item["myval"]).text(item["mytext"]).appendTo(

//上面的代码使用到了JQuery的each()方法,不熟悉的同学可以自己先研究一下,我们找时间也可以专门聊聊这个方法。

完整的代码如下:

<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="width=device-width" />

<script src="~/Script/jquery-1.9.1.min.js"></script>

<title>Index</title>

</head>

<script type="text/javascript">

$("document")‍.ready(function(){

$("#Select1").change(function(){

//1-根据Select1的值获取列表数据

Var mydata = “”;

$.ajax({

url‍:“/myAction/getSelect”,

async:false,

type:”post”,

datatype:”json”,

data:{

//Select1的值提交到服务端

set_val:$(“#Select1”.val())

},

success:function(data){

mydata = data;

}

});

//2-将Ajax获取的数据更新到Select2

//清空Select2控件

$(“#Select2”).empty();

("<option></option>").val("").text("请选择...").appendTo(

.each(mydata, function (i, item) { ("<option></option>").val(item["myval"]).text(item["myText"]).appendTo(

});

});

</script>

<body>

<div style="margin:20px;">

<b>JS如何获取选中的值和文本?</b>

<br /><br />

<select id="Select1">

<option value="0">请选择...</option>

<option value="1">选项一</option>

<option value="2">选项二</option>

<option value="3">选项三</option>

</select>

<br />

<select id="Select2">

<option value="0">请选择...</option>

</select>

</div>

</body>

</html>

感兴趣的读者,复制以上代码,可以自行测试。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-24,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 高渡号外 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Q:‍前端如何实现页面下拉框Select的联动?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档