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();
    
    
  • 相关阅读:
    jbox使用总结
    NOI 2012 【迷失游乐园】
    SCOI 2008 【奖励关】
    trie树——【吴传之火烧连营】
    状压DP——【蜀传之单刀赴会】
    NOIP提高组2016 D2T3 【愤怒的小鸟】
    NOIP提高组2013 D2T3 【华容道】
    [学习笔记] [KMP]字符串匹配算法
    SHOI 2014 【概率充电器】
    HNOI 2015 【亚瑟王】
  • 原文地址:https://www.cnblogs.com/gqx-html/p/7284035.html
Copyright © 2011-2022 走看看