select省市联动+对应经销商、自定义箭头
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>省市联动+对应经销商</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<!--rem.js-->
<script src="js/rem.js"></script>
<style> </style>
</head>
<body>
<div id="app" v-cloak>
<div class="box">
<div class='p1'>
<div class="city">
<div>
<select v-model="province.index" @change="changeProvince">
<option :value="item.id" v-for="(item,index) in province.data">{{item.name}}</option>
</select>
</div>
<div>
<select v-model="city.index" @change="changeCity">
<option :value="item.id" v-for="(item,index) in city.data">{{item.name}}</option>
</select>
</div>
</div>
</div>
<div class='p1'>
<div class="dealer">
<select v-model = "curDealer_id" @change="changeDealer">
<option :value="item.dealer_id" v-for="(item,index) in dealer" >{{item.name}}</option>
</select>
</div>
</div>
<div style="color:#fff;">
<p>省：{{province.index}}</p>
<p>城市：{{city.index}}</p>
<p>经销商：{{curDealer_id}}</p>
</div>
</div> </div>
</div>
<!--公用js-->
<script src="js/jquery_1.12.3_jquery.min.js"></script>
<script src="js/vue.js"></script>
<!--当前页面js-->
<script src="js/index.js"></script>
</body>
</html>
INDEX.JS
var AJAXURL = 'http://mall.faw-vw.com/';
var app = new Vue({
el: "#app",
data: {
province: {
index: 0, //省id ，默认第一个
data: [] //数据
},
city: {
index: 0, //城市id ，默认第一个
data: [] //数据
},
dealer:[],
curDealer_id:'',
}, mounted: function () {
var _this = this;
_this.getProvince();
},
methods:{
// 获取参与经销商省市，默认展示第一条数据
getProvince() {
var _this = this;
var data = [
{id: "110000", name: "北京市"},
{id: "120000", name: "天津市"},
{id: "130000", name: "河北省"},
{id: "140000", name: "山西省"},
{id: "150000", name: "内蒙古自治区"},
{id: "210000", name: "辽宁省"},
{id: "220000", name: "吉林省"},
{id: "230000", name: "黑龙江省"},
{id: "310000", name: "上海市"},
{id: "320000", name: "江苏省"},
{id: "330000", name: "浙江省"},
{id: "340000", name: "安徽省"},
{id: "350000", name: "福建省"},
{id: "360000", name: "江西省"},
{id: "370000", name: "山东省"},
{id: "410000", name: "河南省"},
{id: "420000", name: "湖北省"},
{id: "430000", name: "湖南省"},
{id: "440000", name: "广东省"},
{id: "450000", name: "广西壮族自治区"},
{id: "460000", name: "海南省"},
{id: "500000", name: "重庆市"},
{id: "510000", name: "四川省"},
{id: "520000", name: "贵州省"},
{id: "530000", name: "云南省"},
{id: "540000", name: "西藏自治区"},
{id: "610000", name: "陕西省"},
{id: "620000", name: "甘肃省"},
{id: "630000", name: "青海省"},
{id: "640000", name: "宁夏回族自治区"},
{id: "650000", name: "新疆维吾尔自治区"},
];
_this.province.data =data;
_this.province.index = data[0].id;
_this.getCity(_this.province.index);
},
getCity(provinceId) {
var _this = this;
// 返回数据格式
var data = {
children:[
{id: "230100", name: "哈尔滨市"},
{id: "230200", name: "齐齐哈尔市"},
{id: "230300", name: "鸡西市"},
{id: "230400", name: "鹤岗市"},
{id: "230500", name: "双鸭山市"},
{id: "230600", name: "大庆市"},
{id: "230700", name: "伊春市"},
{id: "230800", name: "佳木斯市"},
{id: "230900", name: "七台河市"},
{id: "231000", name: "牡丹江市"},
{id: "231100", name: "黑河市"},
{id: "231200", name: "绥化市"},
{id: "232700", name: "大兴安岭地区"},
]
}
$.ajax({
url: window.AJAXURL + "/Dealer/Index/getChildRegions",
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: {
id: provinceId,
},
success: function(res) {
_this.city.data = res.data.children;
_this.city.index = res.data.children[0].id //默认展示
_this.getDealer();
}
});
},
getDealer() {
var _this = this;
// 返回数据格式
var data = {
vehicles:[
{name: "山西志国星赛车发展有限公司",dealer_id: "224"},
{name: "山西志国星赛车发展有限公司",dealer_id: "224"},
]
}
$.ajax({
url: window.AJAXURL + "/Dealer/NewCar/oneOfNewCarList",
type: 'post',
contentType: 'application/x-www-form-urlencoded',
data: {
vehicle_id:184,
city_id: _this.city.index,
sort_field:1,
no_page:1,
},
success: function(res) {
var vehicles = res.data.vehicles;
_this.dealer = vehicles;
if(vehicles.length>0){
_this.curDealer_id = vehicles[0].dealer_id;
}
}
});
},
changeProvince(){
this.getCity(this.province.index)
},
changeCity(){
this.getDealer()
},
changeDealer(e){
var _this = this;
var hh = app.dealer.filter(function(c,i,a){
if(c.dealer_id==_this.curDealer_id){
return c
}
})
console.log(_this.curDealer_id,1)
console.log(hh,2)
_this.curDealer_id = hh[0].dealer_id //获取当前option的id值
console.log('当前id:'+_this.curDealer_id)
}, }, })
CSS:
.box{background:#330000;width:300px;height:300px;margin:20px auto;padding:30px}
.p1 .city{display:flex;margin-left:2%}
.p1{border-bottom:1px solid rgba(255,255,255,0.5);width:100%;margin-bottom:5%}
.p1 .city > div{width:55%;margin-right:7%;display:flex;align-items:center;justify-content:space-between;background:url(../images/arrow_Down.png) no-repeat 100% center}
.p1 .city > div:last-child{margin-right:0}
.p1 select{height:27px;font-size:14px;color:#fff;border:none;background-color:transparent;padding-bottom:5px;overflow:hidden;white-space:nowrap;width:100%;text-overflow:ellipsis}
.p1 .dealer{border-bottom:1px solid rgba(255,255,255,0.5);position:relative;width:100%;background:url(../images/arrow_Down.png) no-repeat 100% center}
.p1 select option{color:#000}
select省市联动+对应经销商、自定义箭头的更多相关文章
- select省市联动选择城市 asp.net mvc4
本文在 http://www.cnblogs.com/darrenji/p/3606703.html(感谢博主的分享)基础上加入全国各省市,从文件中读取全国省市县,组成省市联动的选择标签 在Model ...
- select自定义箭头问题 。。。和一行内不同颜色的整体鼠标滑过变色
1.select自定义箭头问题 用<select><option></option></select>的时候自带的三角箭头与需要的三角不同,这是还要求有 ...
- Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
- jquery省市联动，根据公司需求而写
//author:guan //2015-05-25 //省市联动 //实用说明,页面引用如下js //<script src="../js/jquery-1.6.3.min.js&q ...
- AJAX案例四：省市联动
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
- Dynamic CRM 2013学习笔记（八）过滤查找控件 （类似省市联动）
我们经常要实现类似省市联动一样的功能,常见的就是二个查找控件,一个选择了省后,另一个市的查找控件就自动过滤了,只显示当前省下的市,而不是所有的市.当然这是最简单的,实际工作中还有更复杂的功能要通过过滤 ...
- [JS]以下是JS省市联动菜单代码
以下是JS省市联动菜单代码: 代码一: <html> <head> <title></title> <script language=" ...
- Ado.Net小练习03（省市联动）
前台界面: 后台代码: namespace _04省市联动 { public partial class Form1 : Form { public ...
- Ajax省市联动
以JQuery为JS,写的Ajax省市联动. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
- html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
随机推荐
- SpringMVC01:入门、请求参数绑定、自定义类型转换器、常见注解
一.介绍--三层架构和MVC 1.三层架构介绍和MVC设计模型介绍 开发架构一般都是基于两种形式,一种是 C/S 架构,也就是客户端/服务器,另一种是 B/S 架构,也就是浏览器/服务器.在 Java ...
- org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: org.postgresql.util.PSQLException: ERROR: operator does not exist: bigint = character varying
1.报错信息 org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: org.post ...
- 大数据-业务数据采集-FlinkCDC
CDC CDC 是 Change Data Capture(变更数据获取)的简称.核心思想是,监测并捕获数据库的变动(包括数据或数据表的插入.更新以及删除等),将这些变更按发生的顺序完整记录下来,写入 ...
- Linux 常用命令(持续更新)
Linux常用命令介绍(备查) *所有的命名都可以用 命令 --help/man 命令 查看使用说明 1.pwd 显示当前路径 2.dir 和 ls用法一样 都是列出当前路径下的文件(不包括隐藏文件) ...
- 关于 MySQL 嵌套子查询中，无法关联主表字段问题的折中解决方法
今天在工作中写项目的时候,遇到了一个让我感到几乎无解的问题,在转换了思路后,想出了一个折中的解决方案,记录如下. 其实,问题的场景,非常简单: 就是需要查询出上图的数据,红框是从 项目产品表 中查询的 ...
- 学 Rust 要几天？「GitHub 热点速览 v.22.51」
本周的 GitHub Trending 非常给力,一是解决了 Rust 的学习问题,提供了一个全面的教学课程:二是提供了多个高性能工具,比如,为 PWA 而生的 atrilabs-engine,部署方 ...
- Python实验报告（第7章）
实验7:面向对象程序设计 一.实验目的和要求 1.了解面向对象的基本概念(对象.类.构造方法): 2.学会类的定义和使用: 3.掌握属性的创建和修改: 4.掌握继承的基本语法. 二.实验环境 软件版本 ...
- Visual Studio 2022 MAUI NU1105(NETSDK1005) 处理记录
故障说明 MAUI项目是日常使用的项目,一直都好好的 某一天修改了几行代码后,突然项目无法编译了,提示NU1105错误 从Git重新拉取一份之前的代码编译也是同样的错误,经过半天的查阅,尝试了几种方案 ...
- 来自一位十年.net研发老人的吐血整理：.Net技术栈-网址导航
业余时间为什么整理这个? 内容聚合:不用一个一个搜索,我们很快可以进入常用技术官网 提高效率:多看官方文档可以最快,最准确的掌握相关的技术资讯,不用被一些没理解透或者有偏差的技术分享所带偏. 很多有经 ...
- [深度探索C++对象模型]关于成员初始化列表（member initiallization list）
四种特殊情况: 1.当初始化一个reference member时. 2.当初始化一个const member时. 3.当初始化一个base class的constructor,而它拥有一组参数时. ...