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 ...

随机推荐

【SQL进阶】Day05：窗口函数
〇.概述一.专用窗口函数 1.每类试卷得分前3名自己写出来的部分 SELECT tag AS tid, uid AS uid, Rank AS ranking -- 如何确定排名 FROM exa ...
【Java SE进阶】Day05 异常，线程
一.异常 1.概念程序执行过程中,出现非正常情况导致JVM的非正常停止本身是一个类,产生异常即创建并抛出一个异常对象 Java处理异常的方式是进行中断处理异常非语法错误,语法错误直接不会产生cl ...
UIAutomator测试框架介绍
uiautomator简介 UiAutomator是Google提供的用来做安卓自动化测试的一个Java库,基于Accessibility服务.功能很强,可以对第三方App进行测试,获取屏幕上任意一个 ...
制作 Python Docker 镜像的最佳实践
概述 ️Reference: 制作容器镜像的最佳实践这篇文章是关于制作 Python Docker 容器镜像的最佳实践.(2022 年 12 月更新) 最佳实践的目的一方面是为了减小镜像体积,提升 ...
Gorm源码学习-创建行记录
1. 前言 Gorm源码学习系列 Gorm源码学习-数据库连接此文是Gorm源码学习系列的第二篇,主要梳理下通过Gorm创建表的流程. 2. 创建行记录代码示例 gorm提供了以下几个接口来创建行记 ...
Jmeter 之吞吐量控制器
作用: 吞吐量控制器可用来模拟混合场景的压测业务,即一部分用户执行场景A,一部分用户执行场景B 字段说明: Total Excutions:执行请求总数 Percent Excutions:执行线程数 ...
django.db.migrations.exceptions.NodeNotFoundError: Migration apitest.0001_initial dependencies reference nonexistent parent node ('product', '0001_initial')
执行python manage.py makemigrations时出现以下错误 D:\autotestplat>python manage.py makemigrations Tracebac ...
week_4
Andrew Ng 机器学习笔记---by Orangestar Week4_Neural Networks : Representation 1. Non-linear Hypotheses 当特征 ...
5、Idea同时选择多处光标进行编辑
1.按住Alt+Shift,然后用鼠标左键点击文本,可以让光标在多个位置出现2.每个光标都会同时输入你正在输入的文本3.ESC退出搜索复制
【转载】EXCEL VBA 工作表拆分
用VBA拆分工作表是一个不错的方法,特别是在处理大量数据的时候,能节省不少时间. 1.高级筛选: 筛选并复制到新工作表的关键代码如下: Range("Database").Ad ...

select省市联动+对应经销商、自定义箭头

select省市联动+对应经销商、自定义箭头的更多相关文章

随机推荐

热门专题