Vue获取下拉框中的值

vue

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

项目地址：https://gitcode.com/gh_mirrors/vu/vue

免费下载资源

光头强儿

12913人浏览 · 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>

在这里插入图片描述

GitHub 加速计划 / vu / vue

109

下载

vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。

最近提交(Master分支：4 个月前 )

9e887079 [skip ci] 1 年前

73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

AI 浪潮终章奏凯！GitCode & 文心大模型 & 智源研究院 AI 应用开发大赛圆满落幕

AtomGit开源社区

1.8B 体积、33 种语言互译｜腾讯混元 HY-MT1.5-1.8B 多语言机器翻译模型上线

在跨语言交流日益频繁的今天，阅读外语菜单、处理多语言邮件、与不同语言背景的人沟通，已经成为很多人日常工作与生活的一部分。过去，这类需求往往依赖联网翻译工具，而如今，—— 一部设备即可支持的相互翻译。当 AI 不再只是“逐字直译”，而是开始理解语境、风格与语言之间的细微差异，机器翻译就真正具备了今天为大家介绍一款高质量、多语言、支持端侧部署的机器翻译模型 ——，现已上线 AtomGit AI 社区，