vue.js用select實現省,市,提交後,默認顯示省,市信息
阿新 • • 發佈:2017-08-04
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實現省,市,提交後,默認顯示省,市信息