1. 程式人生 > >vue.js用select實現省,市,提交後,默認顯示省,市信息

vue.js用select實現省,市,提交後,默認顯示省,市信息

scrip item use this res cnblogs alert var option

<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();


vue.js用select實現省,市,提交後,默認顯示省,市信息