zoukankan      html  css  js  c++  java
  • vue.js用select实现省,市,提交后,默认显示省,市信息

    <select v-model="citys" name="cityVal" @change="schoolName(citys)">
            <option v-for="(item,index) in city" :value="item.val" v-text="item.name" ></option>
    </select>

    <select v-model="schools" name="schoolVal">
             <option v-for="(item,index) in school" :value="item.val" v-text="item.name" ></option>
     </select>

    <script>
        var vue = new Vue({
            el: '#body',
            data: function() {
                return {
                    city: [{
                        val: '0',
                        name: '城市'
                    }],
                    citys: 0,
                    school: [{
                        val: '0',
                        name: '高校'
                    }],
                    schools: 0,
                    schoolAjax:''
                }
            },
            methods: {
                cityName: function() {
                    var this_obj = this;
                    $.ajax({
                        type: "post",
                        url: $app+"/Clan/city",
                        dataType: "json",
                        success: function(res) {
                            if(res.status) {
                                $.each(res.info,function(k, v) {
                                    this_obj.city.push({
                                        name:v.ar_name,
                                        val:v.ar_id,
                                    })
                                })
                                
                            } else {
                                
                            }
                        },
                        error: function() {
                            $.alert({
                                msg: '传输错误1'
                            })
                        }
                    });
                },
                schoolName: function(citys) {
                    var this_obj = this;    
                    var data = { ar_id:citys};                
                    $.ajax({
                        type: "post",
                        data:data,
                        url: $app+"/Clan/school",
                        dataType: "json",
                        success: function(res) {
                            this_obj.school=[{ val: '0',name: '高校'}]
                            if(res.status) {
                                $.each(res.info,function(k, v) {
                                    this_obj.school.push({
                                        val:v.sc_id,
                                        name:v.sc_name
                                    })
                                });
                                    this_obj.schools=this_obj.schoolAjax;
                            } else {
                                
                        },
                        error: function() {
                            $.alert({
                                msg: '传输错误7'
                            })
                        }
                    });
                },
                defules:function(){
                    var this_obj = this;
                    $.ajax({
                        type: "post",
                        url: $app+"/Call/team_user",
                        dataType: "json",
                        success: function(res) {
                            console.log(res.info);
                            if(res.status) {
                                    
                                    this_obj.schoolName(res.info.us_arid);
                                    this_obj.schoolAjax=res.info.us_scid;                    
                                
                            } else {
    
                            }
                        },
                        error: function() {
                            $.alert({
                                msg: '传输错误5'
                            })
                        }
                    });
                }
                }
        })    
    
        vue.cityName();   
        vue.defules();
    
    
  • 相关阅读:
    iostream迭代器操作"txt文本文件"无法写入的思考
    Qt 相对路径 绝对路径
    "lambda"和“bind”的初步思考
    "partition"和“stable_partition”的思考
    "accumulate"的思考
    顺序容器“inset”的思考
    C++重载函数 const形参 引用指针 const_cast
    C++ 可变参数的函数
    JDK8流式处理常用例子
    JDK8时间新API
  • 原文地址:https://www.cnblogs.com/gqx-html/p/7284035.html
Copyright © 2011-2022 走看看