精华内容
下载资源
问答
  • 下拉框获取值
    万次阅读
    2018-09-28 14:15:56
        <el-form ref="form" :model="form" style="width:300px;margin:0 auto;">
          <el-form-item label="名字">
            <el-select @change="selectGet" v-model="form.region" placeholder="请选择名字">
              <el-option 
                v-for="item in selectList" 
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>

    data里面:

      data() {
        return {
          selectList:[
              {id:0,name:'张三'},
              {id:1,name:'里三'},
              {id:2,name:'李四'}
            ],
          form: {
            region: ""
          }
        };
      },
        selectGet(vId){
          let obj = {};
          obj = this.selectList.find((item)=>{//这里的selectList就是上面遍历的数据源
              return item.id === vId;//筛选出匹配数据
          });
          console.log(obj.name);//我这边的name就是对应label的
          console.log(obj.id);
        }

     

    更多相关内容
  • select下拉框获取值

    2022-07-26 02:52:46
    代码】select下拉框获取值

    select下拉框的使用

    下拉框获取固定的值

     <select name="projectKind" lay-verify="required">
            <option value="">请选择项目类型</option>
            <option value="创新型">创新型</option>
            <option value="公益型">公益型</option>
            <option value="公益型">创意型</option>
          </select>
    

    在这里插入图片描述

    下拉框获取数据库的值

     <select name="positionSid" lay-verify="required" id="id">
                        <option value="" selected="selected">请选择学生学号</option>
    
    <%
                       //连接数据库
                      String driverName="com.mysql.cj.jdbc.Driver";    //Mysql数据库连接
                      String userName="root";
                      String psw="010802";     //本行和上一行是数据库的登录名和密码
                      String dbName="koko";	   //数据库名字
                      String url="jdbc:mysql://localhost:3306/koko?serverTimezone=UTC&characterEncoding=UTF-8&useUnicode=true&useSSL=false";
                                Class.forName(driverName);
                                Connection    conn=DriverManager.getConnection(url,userName,psw);
                                 String strSql="select * from student";
                                Statement   stat=conn.createStatement();
                                ResultSet   rs=stat.executeQuery(strSql);
                                while(rs.next())   //循环输出数据
                                {
                                  String s = rs.getString("sid");
                                  %>
    
                        <option value="<%= s%>"><%= s%></option>
                         <%
                            }
                        %>
                    </select>
    
    展开全文
  • react下拉框获取值

    千次阅读 2019-07-10 11:42:00
    获取被选中的 console.log(event.target.value); this .setState({ // 默认值改变 city:event.target.value }) } } export default App;   转载于:...

    1.遍历选项,option里的value去掉,把value写到select里

    2.onChange方法写到select标签里

    import React, { Component } from 'react'
    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { 
          cities:["北京","上海","广州"],   //选项
          city:"广州"   // 默认选项
         }
      }
      render() { 
        return (
          <div>
            {/* value放在select里 select框也要onChcange*/}
            <select value={this.state.city} onChange={(e)=>this.getValue(e)}>
              {
                // 遍历option
                this.state.cities.map((ele,index)=>{
                  return(
                    <option key={index}>{ele}</option>
                  )
                })
              }
            </select>
          </div>
         );
      }
      getValue=(event)=>{
        //获取被选中的值
        console.log(event.target.value);
        this.setState({
          //默认值改变
          city:event.target.value
        })
    
      }
    }
     
    export default App;

     

    转载于:https://www.cnblogs.com/luguankun/p/11162938.html

    展开全文
  • 今天小编就为大家分享一篇layui下拉框获取下拉(select)的例子,具有好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • layui下拉框获取值与数据回显

    万次阅读 2019-12-17 21:03:21
    这两天做layui的框架项目碰到了下拉框动态赋值与回显,给大家分享一下 新增: <div class="layuimini-container"> <div class="layuimini-main"> <div class="layui-btn-group"> <button id...

    这两天做layui的框架项目碰到了下拉框动态赋值与回显,给大家分享一下
    新增:

    <div class="layuimini-container">
         <div class="layuimini-main">
            <div class="layui-btn-group">
                <button id="modelAdd" class="layui-btn data-add-btn">添加</button>
            </div>
            <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>
            <div id="laypage"></div>
            <script type="text/html" id="currentTableBar">
                <a class="layui-btn layui-btn-xs data-count-edit" lay-event="edit">修改</a>
                <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
            </script>
         </div>
    </div>
    

    我的添加功能是触发modelAdd
    2级联动

    layui.use(['form', 'upload', 'table','common', 'element', 'laypage'], function () {
      const $ = layui.jquery
      const table = layui.table
      const common = layui.common
      const layer = layui.layer
      const upload = layui.upload
      const form = layui.form
      const element = layui.element
      const laypage = layui.laypage
      $("#downloadAdd").click(function () {
            layer.open({
                type: 1,
                title: "上传文件",
                skin: 'layui-layer-rim',
                area: ['500px', '600px'],
                content: '<div style="padding: 20px">\n' +
                    '    <form class="layui-form" enctype="multipart/form-data">\n' +
                    '		<div class="layui-inline"> \n' +
                    '			<label class="layui-form-label">文件类别</label> \n' +
                    '			<div class="layui-input-inline"> \n' +
                    '  				<select id="modelId" name="modelId" lay-filter="modelId" lay-search="" required lay-verify="required"> \n' +
                    '    				<option value="">选择类型</option> \n' +
                    '  				</select> \n' +
                    '			</div> \n' +
                  	'		</div> \n' +
                  	
                  	'		<div class="layui-inline"> \n' +
                    '			<label class="layui-form-label">选择分类</label> \n' +
                    '			<div class="layui-input-inline"> \n' +
                    '  				<select id="categoryId" name="categoryId" lay-filter="categoryId" lay-search="" required lay-verify="required"> \n' +
                    '    				<option value="">选择类型</option> \n' +
                    '  				</select> \n' +
                    '			</div> \n' +
                  	'		</div> \n' +
                  	
                    '        <div style="text-align: center;margin-top: 30px;">\n' +
                    '            <button class="layui-btn layui-btn-normal" id="commit" lay-submit lay-filter="add_download">保存</button>\n' +       
                    '		 </div>\n' +
                    '    </form>\n' +
                    '</div>'
            });
            common.ajaxPost(layui.cache.host + '/model/getByModelName', null, function(res) { //封装的ajax你们可以自己写。调用一级下拉列表获取数据
                if (res.code == '0000') {
                    for (var i = 0; i < res.data.length; i++) {
                        $('#modelId').append(new Option(res.data[i].modelName, res.data[i].mid)); //将数据放到option中
                    }
                }
                form.render('select');//重新渲染下拉框,如果不重新渲染下拉框是不出来的
            });
            form.on('select(modelId)', function (data) { //二级下拉框
            	debugger;
            	modelId= data.value; //获取一级下拉框的value值 
            	if(modelId !=null || modelId != ""){
            		$("#categoryId").empty(); //清空二级下拉框列表值
            		common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelId}, function(res) { //查询二级下拉框列表值,根据一级选的值
                        if (res.code == '0000') {
                            for (var i = 0; i < res.data.length; i++) {
                                $('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid)); //将数据放到二及下拉中
                            }
                        }
                        form.render('select');//重新渲染下拉框
                    });
            	}else{
            		form.render('select');//如果一级不选择二级下拉没有值
            	}
        	});
     	
    });
    

    修改回显:

    layer.open({
                    type: 1,
                    title: "修改下载信息",
                    skin: 'layui-layer-rim',
                    area: ['500px', '560px'],
                    content: '<div style="padding: 20px">\n' +
                        '    <form class="layui-form" enctype="multipart/form-data">\n' +                 
                        '		<div class="layui-inline"> \n' +
                        '			<label class="layui-form-label">文件类别</label> \n' +
                        '			<div class="layui-input-inline"> \n' +
                        '  				<select id="modelId" name="modelId" lay-filter="modelId" lay-search=""required lay-verify="required" > \n' +
                        '    				<option value="">选择类型</option> \n' +
                        '  				</select> \n' +
                        '<input type="text" id="id" name="id" value="' + obj.data.id + '" style="display:none" class="layui-input"> \n' +
                        '			</div> \n' +
                      	'		</div> \n' +
                      	
                      	'		<div class="layui-inline"> \n' +
                        '			<label class="layui-form-label">选择分类</label> \n' +
                        '			<div class="layui-input-inline"> \n' +
                        '  				<select id="categoryId" name="categoryId" lay-filter="categoryId" lay-search="" required lay-verify="required"> \n' +
                        '    				<option value="">选择类型</option> \n' +
                        '  				</select> \n' +
                        '			</div> \n' +
                      	'		</div> \n' +
                      	
                      	'        <div style="text-align: center;margin-top: 30px;">\n' +
                        '            <button class="layui-btn layui-btn-normal" id="commitUpdate" lay-submit lay-filter="update_download">保存</button>\n' +       
                        '		 </div>\n' +
                        '    </form>\n' +
                        '</div>'
                })
            	//类别循环
            	common.ajaxPost(layui.cache.host + '/model/getByModelName', null, function(res) { //查询一级菜单
                    if (res.code == '0000') {
                        for (var i = 0; i < res.data.length; i++) {
                            $('#modelId').append(new Option(res.data[i].modelName, res.data[i].mid));//将数据放到option中
                        }
                        $("#modelId").each(function() { //回显关键
                        	debugger;
                            $(this).children("option").each(function() { //循环读取
                                if (this.value == obj.data.modelId) { //进行比较
                                    $(this).attr("selected","selected"); //选中
                                }
                            });
                        });
                    }
                    form.render('select');//重新渲染
                });
            	var modelIds = obj.data.modelId;//这个地方是关键,获取列表的;一级菜单的值,因为要根据一级的id查询二级 obj.data.modelId是列表你点击修改将整条数据传过来的值
            	common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelIds}, function(res) {//查询二级
                    if (res.code == '0000') {
                        for (var i = 0; i < res.data.length; i++) {
                            $('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid));//赋值option
                        }
                        $("#categoryId").each(function() {//回显默认选中状态
                        	debugger;
                            $(this).children("option").each(function() {
                                if (this.value == obj.data.categoryId) {
                                    $(this).attr("selected","selected");
                                }
                            });
                        });
                    }
                    form.render('select');
                });
                form.on('select(modelId)', function (data) { //重新选中,跟添加的二级菜单一样
                	debugger;
                	modelId= data.value; //获取value值
                	if(modelId !=null || modelId != ""){
                		$("#categoryId").empty();
                		common.ajaxPost(layui.cache.host + '/category/getByCategoryName', {"mid":modelId}, function(res) {
                            if (res.code == '0000') {
                                for (var i = 0; i < res.data.length; i++) {
                                    $('#categoryId').append(new Option(res.data[i].categoryName, res.data[i].cid));
                                }
                            }
                            form.render('select');
                        });
                	}else{
                		form.render('select');
                	}
            	});
    

    整个新增与修改回显就完成了

    展开全文
  • 本篇文章主要介绍了jQuery实现select下拉框获取当前选中文本、、索引以及添加/删除Select的Option项的相关知识,具有很好的参考价值。下面跟着小编一起来看下吧
  • 下面小编就为大家分享一篇select获取下拉框 下拉框默认选中方法,具有很好的参考价值,希望对的有所帮助。一起跟随小编过来看看吧
  • 下拉框获取值及修改值

    千次阅读 2018-07-09 10:41:52
    获取下拉框 text $('.WFNAME').find("option:selected").text(), DropDownlist控件select下拉框 &lt;select id="WFNAME" multiple="multiple" class="easyui-combobox"...
  • Vue element ui Select下拉框获取值

    千次阅读 2019-12-10 11:30:59
    数据定义 data() { return{ projectlist: [],//Select 遍历集合 itemId: 0 } }; 下拉框定义 //v-model="itemId" ... //定义事件getitemId下拉框改变获取信息 <el-select placeholder="项目选择...
  • angular select下拉框获取值

    千次阅读 2018-11-21 15:26:18
    页面结构 上面一个下拉框显示ID,下面一个input框显示名称,选择ID时名称自动回显。提交时,需要同时获取id和name html代码: &lt;mat-form-field&gt; &lt;mat-select placeholder="系统标识&...
  • html获取下拉框和文本

    千次阅读 2022-04-21 17:55:15
    jquery方式 其中info是select的id,后面的option:checked表示选中...js/jq 获取select下拉框的文本和value_mcya的博客-CSDN博客_获取下拉框的valuehttps://blog.csdn.net/genius_yym/article/details/78017030 
  • 今天小编就为大家分享一篇angularjs 动态从后台获取下拉框方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1.表格的下拉框定义: { field: '', title: '', templet: function (d) { var NetWork = "<select data-getid='" + d.ID + "' lay-filter='select1'>" + $("#自定义").val() + "</select>"; ...
  • 方法一 HTML页中 <select name="" id="if02" data-first-option="true" (change)="getChange($event.target.value)">  <option value="-1">--请选择--</option> ...是&...
  • vue下拉框 获取选中的

    千次阅读 2020-10-24 09:54:10
    -- 下拉框获取value --> <el-select v-model="query" @change="selectChanged"> <el-option v-for="item in options" :key="item.value" :value="item" :label="item.label"></el-option>
  • 获取下拉框的显示而非id d = {}; d["agedProvince"] = $("#province option:checked").text(); d["agedCity"] = $("#city option:checked").text(); d["agedCounty"] = $("#area option:checked").text();
  • uniapp设置下拉框获取下拉框值

    万次阅读 热门讨论 2020-02-27 20:28:28
    uniapp设置下拉框: <view class="uni-form-item uni-column">... //@change用于获取下拉框改变的,:range用于循环遍历array数组将数组内容循环 <label>国籍:</label> ...
  • 当修改多选下拉框的时候,需要将原来选的赋给它: var m=rl.job_file.find(id) // 根据id查询之前选的 var model= new jobmodel(); // 定义多选下拉框的model model.Postlist=bind_post(); // 需要先...
  • Vue 下拉框获取数据

    千次阅读 2021-09-09 09:46:49
    但是我不太会,于是自己写了一个小组件也可以起到获取数据库数据并返回到 Vue 下拉框的作用 <template> <div class="demo"> <el-select v-model="queryParams" @change="selectPlatform($event)"&...
  • jquery怎么获取下拉框

    千次阅读 2021-06-12 14:08:32
    怎样用jquery得到select里面选中的456var a = $('#select').val(); // 结果为 123var b = $('#select option:selected').val(); // 结果为 123var d = $('#select option:selected').attr('value'); // 结果为 123...
  • select 多选下拉框获取值

    千次阅读 2019-01-31 09:32:22
    1. 设置多选:添加属性 multiple="...提交后获取 array(6) { ["title"] => string(0) "" ["views"] => string(0) "" ["selectid"] => array(2) { [0] => string(1) "2" [1] => string(1) "3" } }  
  • 获取select下拉框(总结)

    万次阅读 2019-07-04 16:38:47
    获取select下拉框 最近学习用到就总结起来,以便日后复习啦~~ 案例: 1、新建web项目 2、下载jQuery 有两个版本的 jQuery 可供下载: Production version - 用于实际的网站中,已被精简和压缩。 ...
  • 主要介绍了JS获取下拉框显示和判断单选按钮的方法,实例分析了javascript针对html下拉框及单选按钮的相关操作技巧,需要的朋友可以参考下
  • php 如何取得select下拉列表框的,其实就是需要设置下name属性获取下即可。
  • 运行,看效果tooltip-effect="dark"@selection-change="handleSelectionChange":data="tableData"style="width: 100%">type="selection"width="55">prop="date"label="日期"width="180">...
  • layui下拉框获取数据

    千次阅读 2020-09-27 17:19:52
    卡片类型: 请选择 xx卡 xx卡 xx卡 自动选取了获取的数据 借鉴: 点击到达.

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 44,613
精华内容 17,845
关键字:

下拉框获取值