精华内容
下载资源
问答
  • 下拉框

    千次阅读 2019-06-18 08:11:59
    通常我都是会给下拉框一个请选择占个坑,因为不给请选择就默认选择第一个选项,所以需要给个请选择占个坑,其实下拉框还可以指定默认值,而且下拉框还可以有禁用效果,我只知道按钮和文本框可以禁用,没想过下拉框也...

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    开发工具与关键技术:DW   CSS和JS

    作者:袁志彤

    撰写时间:2019-06-07

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    下拉框这东西我用的很多,也比较熟悉,然而我在翻看layui文档的时候,发现了一些不常用到,却非常有用的,我竟然都没有用过这些下拉框,也不知道下拉框有这些功能。

     

    通常我都是会给下拉框一个请选择占个坑,因为不给请选择就默认选择第一个选项,所以需要给个请选择占个坑,其实下拉框还可以指定默认值,而且下拉框还可以有禁用效果,我只知道按钮和文本框可以禁用,没想过下拉框也可以

     

     

    加个disabled就是禁用效果,加个selected就是设置为默认,本来页面一刷新,显示的应该是北京,但是我给杭州加了个默认后,页面一刷新默认显示的就是杭州了。

     

     

    不仅如此,下拉框还可以分组,分组是通过一个optgroup标签来分组的,这样区分,更便于查找,而且代码看起来更美观。

     

     

    还有一个我认为是最有用的,就是可以查询的下拉框,下拉框最怕的是什么?是选项太多了,找不到自己要选择的选项,如果可以搜索,那就完美了。

     

    要做这个带搜索功能的下拉框,有点儿麻烦,需要用到layui插件中的lay-search属性,只要给下拉框加上这个属性,就可以让下拉框有搜索功能

    因为下拉框是表单组件,所以需要加载form模块才能使用,而且下拉框必须写在form标签里才行。

    展开全文
  • layui 如何取得select下拉框选中的值

    万次阅读 热门讨论 2018-07-13 09:58:05
    引用layui插件,取得下拉框的值模板:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" ...
    var addressid = $('#addressid[name=addressid]').val()

     

    form.on('select(filter)', function(data){
      console.log(data.elem); //得到select原始DOM对象
      console.log(data.value); //得到被选中的值
      console.log(data.othis); //得到美化后的DOM对象
      console.log(data.elem[data.elem.selectedIndex].text); //得到文本内容
    });  

    引用layui插件,取得下拉框的值

     

    模板:

    <!DOCTYPE html>
    <html>				
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
      <title>增加、修改学校/层次/专业</title>
      <link rel="stylesheet" href="__ADMIN__/common/frame/layui/css/layui.css">
    </head>
    <body>
    <div class="layui-fluid layui-form">
    <form class="layui-form" action="" method="post">
    <br>
              <div style="padding-left: 100px; padding-bottom: 20px;"><h2>{$rs1.title} >> {$rs.title}</h2></div>
              <div class="layui-form-item">
                <label class="layui-form-label">学费</label>
                <div class="layui-input-block">
                  <input type="text" name="price" required  lay-verify="required" class="layui-input" value="{$rs.price}" readonly>
                </div>
              </div>
              <div class="layui-form-item">
                <label class="layui-form-label">批次</label>
                <div class="layui-input-block">
    							<select name="batch" id="batch" lay-filter="batch" lay-verify="required" lay-search="required">
                       <option value="">请选择批次</option>
                      {volist name="batch_rs" id="batch"}
    							    <option value="{$batch.id}" {if condition="$rsEdit.batch eq $batch.id"}selected{/if}>{$batch.title}</option>
    							    {/volist}
    							</select>  
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button type="button" id="editbatchschooltuition" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                </div>
              </div>
    
    </form>
    </div>
    <script src="__ADMIN__/common/frame/layui/layui.js"></script>
    <script>
    layui.use(['form', 'jquery'], function(){
      var form = layui.form
      ,$= layui.$;
      
    // var batch=$("#batch").val();
       
    form.on('select', function(data){
      console.log(data.elem); //得到select原始DOM对象
      console.log(data.value); //得到被选中的值]
      $("#batch").val(data.value)
      console.log(data.othis); //得到美化后的DOM对象
    });  
       
      	$('#editbatchschooltuition').on('click', function(){
      		var batch=$("#batch").val();
      			alert(batch);
    						layer.ready(function(){ 
    							  layer.open({
    								type: 2,
    								title: '增加',
    								maxmin: true,
    								area: ['750px', '400px'],
    								content: '{:url('main/addschool')}?id={$id}&price={$rs.price}&batch='+batch,
    								//content: '{:url('main/addschool')}',
    								cancel: function(){ //刷新网页
    			
    								  }
    							  });
    						});
    		});
      
    });
    </script>
    </body>

     

     

     

    展开全文
  • js多选下拉框多选下拉框多选下拉框

    热门讨论 2011-08-19 14:18:37
    js多选下拉框多选下拉框多选下拉框js多选下拉框多选下拉框多选下拉框
  • IOS下拉框

    2013-03-06 13:52:43
    下拉框
  • 下拉框美化

    2019-02-21 10:38:49
    表单下拉框美化效果。
  • 下拉框搜索

    2018-11-26 23:05:39
    此文件为前端js的下拉框搜索插件,提供搜索下拉框里的所有内容,并过滤显示。
  • 多选下拉框

    2018-08-23 10:55:38
    多选下拉框 jq-multiselect
  • 下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化下拉框美化
  • Bootstrap下拉框

    2017-03-27 15:53:24
    Bootstrap的多种下拉框样式
  • uniapp设置下拉框并获取下拉框

    万次阅读 2020-02-27 20:28:28
    uniapp设置下拉框: <view class="uni-form-item uni-column"> <picker @change="bindPickerChange" :range="array"> //@change用于获取下拉框改变的值,:range用于循环遍历array数组将数组内容循环 ...

    uniapp设置下拉框:
    下拉框

    <view class="uni-form-item uni-column">
    	<picker @change="bindPickerChange" :range="array">	//@change用于获取下拉框改变的值,:range用于循环遍历array数组将数组内容循环
    		<label>国籍:</label>
    		<label class="">{{array[index]}}</label>		//循环array数组index为索引
    	</picker>
    </view>
    
    *下面是定义的数组和索引:*
    

    定义数组
    最后是获取下拉框的值:
    下拉框取值

    //下拉框
    bindPickerChange: function(e) {		//改变的事件名
    	//console.log('picker发送选择改变,携带值为', e.target.value)   用于输出改变索引值
    	this.index = e.target.value			//将数组改变索引赋给定义的index变量
    	this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
    //	console.log("籍贯为:",this.jg)		//输出获取的籍贯值,例如:中国
    },
    

    效果如下:
    效果图
    uniapp下拉框其实还有很多方法,我这个只是很粗糙的一个!

    展开全文
  • 本文主要介绍select下拉框的相关方法。 1、通过id获取下拉框的value和文本值 例如: <select class=form-control id=numbers> 数字1 数字2 </select> $(#numbers option:selected).val(); 获取到...
  • bootstrap树控件使用bootstrap-treeview.js树形控件在下拉框select中显示,带树形的下拉框
  • 搜索下拉框

    2018-01-31 23:32:56
    经测试,很好用的包含搜索功能的下拉框,输入内容搜索下拉框的内容
  • 好用的bootstrap下拉框,其中含多选下拉框,保证下载即可使用
  • 日常使用软件中,为了方便且规范输入,会使用到下拉框进行输入,如注册时生日选项,购物时的地址输入,都会用到下拉框,今日笔者为了巩固已学的知识,实现了二级联动下拉框用作回顾及分享给求知的新手。 思路/步骤:...
  • 下拉框组件

    2013-01-11 14:10:47
    下拉框组件
  • cxgrid下拉框

    2015-02-12 12:16:16
    cxgrid 下拉框,很多人不知道怎么在grid数据显示添加时设置下拉框,或许这个可以帮到你。
  • 下拉框测试工具

    2018-08-08 14:47:48
    测试下拉框工具,执行python脚本,可测试下拉框各个选项的结果,对于下拉框项比较多的测试比较有帮助
  • jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件 jQuery自定义下拉框插件
  • 下拉框特效

    2012-05-15 17:24:20
    下拉框特效
  • DropDownList下拉框多选

    2018-09-07 13:32:54
    DropDownList下拉框多选demo
  • jQuery Selectric下拉框菜单,主要功能有,基本用法,获取选定的选项值,设定值,更改选项,回调,通过Ajax请求填充,下拉框的自定义标记,下拉框定义向上,下拉框定义向下等。
  • bootstrap 下拉框

    2015-08-13 06:49:24
    下拉框,支持多选,bootstrap 非常适合bootstrap项目搭建使用。分享给大家
  • jQuery手机下拉框select

    2019-11-03 15:16:04
    jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 155,826
精华内容 62,330
关键字:

下拉框