Vue获取下拉框中的值

一、获取含有默认省的下拉框中的name值<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><title>Document</title&a

光头强儿

12726人浏览 · 2019-01-19 11:10:22

光头强儿 · 2019-01-19 11:10:22 发布

一、`获取含有默认省的下拉框中的name值`

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<body>
<form id="app5">
    <select v-model="moren">
        <option v-for="datas in province" selected="selected" v-if="datas.aname==moren" :value="datas.aname">{{datas.aname}}</option>
        <option v-else :value="datas.aname">{{datas.aname}}</option>
        <input type="button" @click="ceshi" value="提交" />
    </select>
</form>
</body>
<script>
    var app5 = new Vue({
            el: '#app5',
            data: {
                province:'',
                moren:'山东省',
            },
            methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/indexs")}')
                        .then(function(res){
                            this.province=res.data;
                            console.log(this.province);
                        })
                        .catch(function(error){
                            
                        });
                },
                ceshi:function(){
                    console.log(this.moren);
                }
            },
            created(){
                this.indexs();
            }
        });
</script>
</html>

`province：是中国所有的省。`

在这里插入图片描述

二、`获取含有默认省的下拉框中的id值`

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<body>
<form id="app5">
    <select v-model="moren">
        <option v-for="datas in province" selected="selected" v-if="datas.aid==moren" :value="datas.aid">{{datas.aname}}</option>
        <option v-else :value="datas.aid">{{datas.aname}}</option>
        <input type="button" @click="ceshi" value="提交" />
    </select>
</form>
</body>
<script>
    var app5 = new Vue({
            el: '#app5',
            data: {
                province:'',
                moren:6,
            },
            methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/indexs")}')
                        .then(function(res){
                            this.province=res.data;
                            console.log(this.province);
                        })
                        .catch(function(error){  
                        });
                },
                ceshi:function(){
                    console.log(this.moren);
                }
            },
            created(){
                this.indexs();
            }
        });
</script>
</html>

在这里插入图片描述

三、`获取所有省的name值`

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<body>
<form id="app5">
    <select v-model="moren">
        <option>请选择</option>
        <option v-for="datas in province" :value="datas.aname">{{datas.aname}}</option>
        <input type="button" @click="ceshi" value="提交" />
    </select>
</form>
</body>
<script>
    var app5 = new Vue({
            el: '#app5',
            data: {
                province:'',
                moren:'请选择',
            },
            methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/indexs")}')
                        .then(function(res){
                            this.province=res.data;
                            console.log(this.province);
                        })
                        .catch(function(error){  
                        });
                },
                ceshi:function(){
                    console.log(this.moren);
                }
            },
            created(){
                this.indexs();
            }
        });
</script>
</html>

在这里插入图片描述

`四、获取所有省的id值`

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<script src="http://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.js"></script>
<body>
<form id="app5">
    <select v-model="moren">
        <option :value="2">请选择</option>
        <option v-for="datas in province" :value="datas.aid">{{datas.aname}}</option>
        <input type="button" @click="ceshi" value="提交" />
    </select>
</form>
</body>
<script>
    var app5 = new Vue({
            el: '#app5',
            data: {
                province:'',
                moren:'2',
            },
            methods: {
                indexs:function(){
                    this.$http.post('{:url("Index/indexs")}')
                        .then(function(res){
                            this.province=res.data;
                            console.log(this.province);
                        })
                        .catch(function(error){  
                        });
                },
                ceshi:function(){
                    console.log(this.moren);
                }
            },
            created(){
                this.indexs();
            }
        });
</script>
</html>

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^