首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue实现省份城市选择

之前都是后端操作的,城市数据都是存在数据库的,前端选择然后去后端查的,比较简单方便。这次开发的是前端,客户没有提供城市选择的接口,省市这些数据感觉还是放在数据库后端操作较好。...--页面调用组件-->    /*写在页面加载方法中,重置选择中的值*/ this....$refs.resetCountry.changeValueCity() 因为有多个页面需要使用,所以把选择城市的封装成atom-city组件,我这个需求是有选择国家的,如果选择的是中国才会有省份城市的选择...,否则用户自己输入省份城市,以下代码参考https://blog.csdn.net/lllo3o/article/details/72955701:        <div...省份城市联动选择实现示例(通过vue数组过滤) 基于vue2实现省市联动

2.7K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    你的JSON & AJAX 满分学习文章,请收下

    、代码实现 3.3.1、编写页面 3.3.2、编写 JS 代码 3.3.3、编写后台获取省份数据和城市数据 一、JSON 1、定义 JSON(JavaScript Object Notation, JS...3.2、二级联动的实现思路 页面加载完,省份下拉从后台获取省份数据; 将后台获取的响应数据,渲染到省份下拉中; 给省份下框绑定值改变的事件,值发生改变之后,把选择的省份 id 传给后台; 将后台获取的响应数据...,渲染到城市下拉中。...3.3、代码实现 3.3.1、编写页面 新建 webapp/jq_02/04.province_city.html,引入好 jQuery,提供省份城市下拉 <head...,当省份下拉框选项改变了,就发送请求获取这个省份 对应城市数据,拿到数据再使用 DOM 显示城市下拉中 $p.change(function () { var

    2.8K20

    以【联动列表】来看单一职责!

    首先一个问题就是,用哪种列表,然后是其ID、name等属性的命名规范。然后是列表是怎么出来的?是写死在body里,还是用js动态创建出来,还是其他的什么方式? 这些都属于列表的职责。...省份的下拉列表change之后,城市的下拉列表要显示选择的省份里的城市城市改变了之后,区县下拉列表的选项也有随之变化,这就是他们的联动关系。...城市、区县、街道的话,是可以滴)。...我还得改联动列表,但是同上的问题。 这就是让一个控件负责多个职责的缺点。 那么分开来有啥好处呢? 我可以写一个js,专门负责动态创建各种列表,比如下拉列表等等。...在写一个js,专门负责数据提取。 再来一个js,专门负责表单里的控件的布局。 最后一个js,就是负责联动

    1.9K90

    【自然框架】分享 n级联动下拉列表

    特点: 1、 使用js方法,把需要的数据一次性写入到页面里,然后用js来实现联动的效果。 2、 支持n级。 3、 封装成了服务器控件,所以使用非常简单。 4、 支持在回发的时候保持状态。...n级联动,那么就需要n条SQL语句。 3、 修改记录演示 一般在修改记录的时候,需要根据记录里的信息设置列表的选项,这里演示了这种功能。...string[] html = new string[6];             html[0] = "省份:";             html[2] = "城市:";             ...演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_table.aspx 省份城市、区县各占一行的形式。...演示直通:http://demo.naturefw.com/Nonline/other/UniteListHTML_div.aspx 省份城市、区县各占一行的形式。 ?

    2.8K70

    Android实现联动下拉二级地市联动下拉功能

    日常使用软件中,为了方便且规范输入,会使用到下拉进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉,今日笔者为了巩固已学的知识,实现了二级联动下拉用作回顾及分享给求知的新手。...思路/步骤: 在实现联动下拉之前,我们先对用到的ArrayAdapter和数据的封装作必要的了解,Android 中提供了很多适配器的实现类,其中ArrayAdapter就其中之一。..., View v, int i, long l) { City = spinner2.getSelectedItem().toString();//当前选中的地市 if (City.equals("-城市...{ Toast.makeText(getApplicationContext(), Province+"省"+City, Toast.LENGTH_LONG).show();//Toast显示选中的省份城市...总结 以上所述是小编给大家介绍的Android实现联动下拉二级地市联动下拉功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

    3.7K10

    AJAX入门这一篇就够了

    【XML版】 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市......有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的。这是怎么做到的呢???其实就是通过AJAX来完成的。...前台分析 当用户选择了某个省份之后,就使用AJAX与服务器进行交互,那么在选择城市的时候就出现对应的城市信息。...省份-城市-区域三级联动【Struts2 + JSON版】 ---- 分析 与上次是一样的,只不过这次换了用JSON,使用Action控制罢了... 监听下拉的变动,使用异步对象与服务器进行交互。...,把城市和区域的下拉清空,当选择城市时,把区域的下拉清空 ---- 总结图 ?

    4.9K91

    (修订版)AJAX入门!

    【XML版】 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市… 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的。...8.1.1前台分析 当用户选择了某个省份之后,就使用AJAX与服务器进行交互,那么在选择城市的时候就出现对应的城市信息。...监听下拉值变化事件 只要下拉值变化了,就与服务器进行交互 得到服务器返回的值,解析XML 使用DOM把数据写到城市下拉列表中 8.1.2后台分析 得到前台带过来的数据 判断该数据是什么,返回对应的的...省份-城市-区域三级联动【Struts2 + JSON版】 ---- 9.1分析 与上次是一样的,只不过这次换了用JSON,使用Action控制罢了… 监听下拉的变动,使用异步对象与服务器进行交互。...,把城市和区域的下拉清空,当选择城市时,把区域的下拉清空 ---- 十、总结图 ?

    1.4K11

    AJAX入门!

    【XML版】 我们在购物的时候,常常需要我们来选择自己的收货地址,先选择省份,再选择城市… 有没有发现:当我们选择完省份的时候,出现的城市全部都是根据省份来给我们选择的。...8.1.1前台分析 当用户选择了某个省份之后,就使用AJAX与服务器进行交互,那么在选择城市的时候就出现对应的城市信息。...监听下拉值变化事件 只要下拉值变化了,就与服务器进行交互 得到服务器返回的值,解析XML 使用DOM把数据写到城市下拉列表中 8.1.2后台分析 得到前台带过来的数据 判断该数据是什么,返回对应的的...省份-城市-区域三级联动【Struts2 + JSON版】 ---- 9.1分析 与上次是一样的,只不过这次换了用JSON,使用Action控制罢了… 监听下拉的变动,使用异步对象与服务器进行交互。...,把城市和区域的下拉清空,当选择城市时,把区域的下拉清空 ---- 十、总结图 ?

    1.7K20

    新零售mysql设计(设计省份+城市表)

    作者:陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主 文章目录 sql(省份表) sql(城市表) 省市表之间的联系是: province_id int unsigned...UNIQUE unq_province(province)是什么意思》 举个例子: 是不是表一般都要有idname呀 像省份是不是 province 就是name呀 sql(省份表) CREATE...是不是得说这个城市属于哪一个省份呀 sql(城市表) CREATE table t_city( id int unsigned PRIMARY key AUTO_INCREMENT COMMENT..."主键", city varchar(200) not null COMMENT "城市", province_id int unsigned not null COMMENT "省份id"...) COMMENT="城市表"; 省市表之间的联系是: province_id int unsigned not null COMMENT “省份id” 城市是属于哪一个省份的呢 id int unsigned

    800110

    04_使用JS完成功能

    JS代码 (1)使用弹方式进行提示: function checkForm(){ /*校验用户名*/ //alert("aa"...onchange:当用户改变内容的时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框的状态...完成省市二级联动 技术分析 事件(onchange) 使用一个二维数组来存储省份城市(二维数组的创建?)...获取用户选择的省份(使用方法传参的方式:this.value) 遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市) 创建文本节点和元素节点并进行添加操作 createTextNode...第四步:遍历二维数组中的省份 第五步:将遍历的省份与用户选择的省份比较 第六步:如果相同,遍历该省份下所有的城市 第七步:创建城市文本节点 第八步:创建option元素节点 第九步:将城市文本节点添加到

    3.9K60
    领券