Vue获取下拉框中的值

最新推荐文章于 2024-05-16 10:56:48 发布

光头强儿

最新推荐文章于 2024-05-16 10:56:48 发布

阅读量1.2w

点赞数 4

分类专栏：大前端

本文链接：https://blog.csdn.net/qq_42249896/article/details/86550161

版权

大前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

一、`获取含有默认省的下拉框中的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>

在这里插入图片描述

光头强儿

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
Vue获取下拉框中的值

一、获取含有默认省的下拉框中的name值&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;script src
复制链接

扫一扫