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();
    
    
  • 相关阅读:
    struts2 中的 result 返回类型是 json 的配置问题
    EL 表达式 取值将 < 转成 &1t 问题
    Redis 设计与实现读书笔记一 Redis List
    lhgdialog 与后台交互的对话框
    Redis 设计与实现读书笔记一 Redis字符串
    Struts2 OGNL使用详解(转)
    Struts2 中遇到的问题
    Struts2
    Linux服务器开发:工具
    fastadmin html数字验证
  • 原文地址:https://www.cnblogs.com/gqx-html/p/7284035.html
Copyright © 2011-2022 走看看