精华内容
下载资源
问答
  • 1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框; input实现select回显注意2个地方: 1)使用 readonly=“readonly” 让input框无法实现输入 ,不获取焦点; <...
    • 1.实现的效果
    • 2.实现说明
    • 3.完整代码

    一、实现的效果:

    在这里插入图片描述
    在这里插入图片描述

    二、实现说明:

    1.由于无法修改原生select中的option样式,因此自己通过ul,li实现下拉列表,用input实现回显框;
    input实现select回显注意2个地方:
    1)使用 readonly=“readonly” 让input框无法实现输入 ,不获取焦点;

    <input type="text" readonly="readonly" class="ec-input__value" placeholder="业务类型" value="" id="yewu-value">
    

    2)当需要input框可以输入时,使用autocomplete=“new-password” 避免input框获取焦点时自动以下拉的方式弹出以前输入过的值,导致覆盖真正需要展示的下拉列表

     <input type="text" autocomplete="new-password" class="ec-input__value" placeholder="请选择国家地区" value="" id="area-value" oninput="enterSearch(this)">
    

    2.下拉框的弹出与隐藏
    1)没有显示时点击input部分弹出(同时右侧三角箭头改变,朝上),当弹出框以及显示点击隐藏下拉弹出框(三角箭头方向恢复,朝下)
    实现弹出下拉列表代码如下:

       //自定义下拉框弹出事件
      function openValue(obj, e){
        e.stopPropagation(); //阻止冒泡
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault ){
          e.preventDefault();
        } else{
          window.event.returnValue = false;
        }
        if ($(".dropdown-menus").is(":visible")) {
          $('.dropdown-menus').hide();
          $('.ec-input').removeClass('ec-input__open');
        }else{
          $(obj).addClass('ec-input__open');
          $(obj).next().show();
        }
      }
    

    右侧三角箭头

     .caret{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
      }
      .ec-input .caret {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -2px;
        vertical-align: middle;
       }
       .ec-input__open .caret{
         transform: rotate(180deg);
       }
    

    2)选中下拉框的某一个值之后,值回显,弹出框隐藏;
    注意:由于使用事件委托的方式,当点击某一个选项时,有可能点击的target不是li节点,而是li的子节点,此时可以取其父节点

     // 点击的地方可能是li,也可能是li的子节点
        if(e.target && e.target.nodeName == "LI"){
          selectedDom = e.target;
        }else{
          selectedDom = $(e.target).parent();
        }
    

    事件的完整代码如下:

       //点击某个下拉菜单的值之后的事件处理
      function getValue(obj, e){
        e.stopPropagation(); //阻止冒泡
        var selectedDom;
        // 点击的地方可能是li,也可能是li的子节点
        if(e.target && e.target.nodeName == "LI"){
          selectedDom = e.target;
        }else{
          selectedDom = $(e.target).parent();
        }
        var selectedValue = $(selectedDom).data('value');
        var selectedLable = $(selectedDom).data('label');
        var operId = $(obj).data('id');
        $(selectedDom).siblings().removeClass('ec-active')
        $(selectedDom).addClass('ec-active');
        $('#'+operId+'-value').val(selectedLable);
        $('#'+operId+'-label').val(selectedValue);
        $('.ec-input').removeClass('ec-input__open');
        $(obj).parent().hide();
      }
    

    3)当下拉弹出框显示时,点击下拉组件以外的部分,弹出框隐藏,代码如下:

     // 自定义下拉框:点击其他部分收起下拉事件
      document.addEventListener("click", (e) => {
        if ($(".dropdown-menus").is(":visible")) {
          $('.dropdown-menus').hide();
          $('.ec-input').removeClass('ec-input__open');
        }
      });
    

    3.带搜索的下拉框,当中文输入法输入中文时,让其回显中文时实现搜索,而非输入每次输入都执行一次搜索操作,代码如下:

       // 中文输入法
        $('.ec-input__value').on('compositionstart',function(event) {
          isChinese = true;
    		})
        //  输入中文之后
        $('.ec-input__value').on('compositionend',function() {
          isChinese = false;
          enterSearch(this)
        })
    

    三、完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>自定义下拉组件</title>
    </head>
    <style>
        body, p{
            margin:0;
            padding:0;
        }
        .container{
          margin:100px;
        }
        .askForm{
            margin:20px;
            display: flex;
            display: -webkit-flex;
            background: #fff;
            border:1px solid #e1e1e1;
            border-radius: 6px;
            height: 34px;
        }
        .select-left{
            flex:2;
        }
        .select-right{
            flex: 3;
            padding-right: 10px;
        }
        .ec-select{
            height: 34px;
        }
        .select-online{
            width: 20px;
            margin-right: 10px;
            height: 20px;
            margin-top:7px;
            border-right: 1px solid #e1e1e1;
        }
      .ec-input{
        width: 100%;
        height: 34px;
        line-height: 34px;
        padding-left: 10px;
        position: relative;
      }
      .ec-input .ec-input__value{
        border: none;
        outline: none;
        width: 90%;
        cursor: pointer;
      }
      .caret{
        display: inline-block;
        width: 0;
        height: 0;
        margin-left: 2px;
        vertical-align: middle;
        border-top: 4px dashed;
        border-top: 4px solid;
        border-right: 4px solid transparent;
        border-left: 4px solid transparent;
      }
      .ec-input .caret {
        position: absolute;
        top: 50%;
        right: 12px;
        margin-top: -2px;
        vertical-align: middle;
       }
       .ec-input__open .caret{
         transform: rotate(180deg);
       }
      .dropdown-menus{
          position: relative;
          max-height: 200px;
          width: 100%;
          display: none;
          border: 1px solid rgba(0,0,0,.15);
          border-radius: 4px;
          -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
          box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
          overflow-y: scroll;
          overflow: auto;
          min-height: 42px;
      }
      .dropdown-menu{
        padding:6px 0;
        margin:0;
        list-style: none;
      }
      .menu-item{
        height: 30px;
        cursor: pointer;
        line-height: 30px;
        padding-left: 10px;
      }
      .menu-item:hover{
        outline: 0;
        color:#FF9500;
        background: rgba(255, 149, 0, 0.1);
      }
      .select-ok{
        position: absolute;
        display: inline-block;
        right: 15px;
        margin-top: 8px;
      }
      .ec-active .select-ok{
        width: 14px;
        height: 6px;
        display: inline-block;
        border: 1px solid #FF9500;
        border-width: 0 0 2px 2px;
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        vertical-align: baseline;
      }
      .no-result{
        padding: 8px;
      }
    </style>
    <body>
      <div class="container">
        <div class="askForm">
            <div class="select-container select-left">
                <div class="ec-input" onclick="openValue(this,event)">
                  <input type="hidden" value="" id="yewu-label">
                  <input type="text" readonly="readonly" class="ec-input__value" placeholder="业务类型" value="" id="yewu-value">
                  <span class="caret"></span>
                </div>
                <div class="dropdown-menus">
                  <ul class="dropdown-menu" onclick="getValue(this, event)" data-id="yewu">
                    <li class="menu-item" data-value="0" data-label="专线"><span class="text">专线</span><span class="select-ok"></span></li>
                    <li class="menu-item ec-active" data-value="1" data-label="系统通知"><span class="text">系统通知</span><span class="select-ok"></span></li>
                    <li class="menu-item" data-value="2" data-label="版本发布"><span class="text">版本发布</span><span class="select-ok"></span></li>
                  </ul>
                </div>
            </div>
            <div class="select-online"></div>
            <div class="select-container select-right">
                <div class="ec-input" onclick="openValue(this,event)">
                  <input type="hidden" value="" id="area-label">
                  <input type="text" class="ec-input__value" autocomplete="new-password" placeholder="请选择国家地区" value="" id="area-value" oninput="enterSearch(this)">
                  <span class="caret"></span>
                </div>
                <div class="dropdown-menus area-menus">
                </div>
            </div>
        </div>
      </div>
    </body>
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
    <script>
      var earaData = [
        {name:'中国'},
        {name:'泰国'},
        {name:'美国'},
        {name:'英国'},
        {name:'日本'},
        {name:'澳大利亚'},
        {name:'韩国'},
        {name:'印度尼西亚'},
      ];
      var filterArea = [];
      var isChinese = false;
      searchArea('');//初始化国家地区dom
       //自定义下拉框弹出事件
      function openValue(obj, e){
        e.stopPropagation(); //阻止冒泡
        //阻止默认浏览器动作(W3C)
        if ( e && e.preventDefault ){
          e.preventDefault();
        } else{
          window.event.returnValue = false;
        }
        if ($(".dropdown-menus").is(":visible")) {
          $('.dropdown-menus').hide();
          $('.ec-input').removeClass('ec-input__open');
        }else{
          $(obj).addClass('ec-input__open');
          $(obj).next().show();
        }
      }
       //点击某个下拉菜单的值之后的事件处理
      function getValue(obj, e){
        e.stopPropagation(); //阻止冒泡
        var selectedDom;
        // 点击的地方可能是li,也可能是li的子节点
        if(e.target && e.target.nodeName == "LI"){
          selectedDom = e.target;
        }else{
          selectedDom = $(e.target).parent();
        }
        var selectedValue = $(selectedDom).data('value');
        var selectedLable = $(selectedDom).data('label');
        var operId = $(obj).data('id');
        $(selectedDom).siblings().removeClass('ec-active')
        $(selectedDom).addClass('ec-active');
        $('#'+operId+'-value').val(selectedLable);
        $('#'+operId+'-label').val(selectedValue);
        $('.ec-input').removeClass('ec-input__open');
        $(obj).parent().hide();
      }
     //国家地区搜索框输入事件
      function enterSearch(obj){
        if(!isChinese){
          var key = $(obj).val();
          searchArea(key);
        }
      }
       // 下拉搜索框搜索事件
      function searchArea(key){
        filterArea = [];
        for(var j = 0,len=earaData.length;j<len;j++){
          if(earaData[j].name.match(key)){
            filterArea.push(earaData[j].name)
          }
        }
        appendSelectArea(key);
      }
        // 中文输入法
        $('.ec-input__value').on('compositionstart',function(event) {
          isChinese = true;
    		})
        //  输入中文之后
        $('.ec-input__value').on('compositionend',function() {
          isChinese = false;
          enterSearch(this)
        })
        // 将搜索到的结果重新渲染到下拉框中
      function appendSelectArea(key){
        var areasHtml = '';
        if(filterArea && filterArea.length>0){
          areasHtml = '<ul class="dropdown-menu" οnclick="getValue(this, event)" data-id="area">';
          for(var i = 0,len = filterArea.length ;i<len;i++){
            areasHtml+='<li class="menu-item" data-value='+filterArea[i]+' data-label='+filterArea[i]+'><span class="text">'+filterArea[i]+'</span><span class="select-ok"></span></li>'
          }
          areasHtml+='</ul>';
        }else{
          areasHtml = '<div class="dropdown-menu no-result" data-id="area"> 很抱歉没有找到“'+key+'”相关结果!</div>';
        }
        $('.area-menus').html(areasHtml);
      }
      // 自定义下拉框:点击其他部分收起下拉事件
      document.addEventListener("click", (e) => {
          if ($(".dropdown-menus").is(":visible")) {
            $('.dropdown-menus').hide();
            $('.ec-input').removeClass('ec-input__open');
          }
        });
    </script>
    </html>
    
    展开全文
  • 带搜索框的select下拉框

    千次阅读 2019-01-21 14:08:00
    利用select2制作带有搜索功能的select下拉框 1.引入线上css和js <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" /> <script src=...

    利用select2制作带有搜索功能的select下拉框

    1.引入线上css和js

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

    2.在select标签内加入class属性js-example-basic-single

    <select class="js-example-basic-single" name="state">

    <option value="AL">Alabama</option>

    ...

    <option value="WY">Wyoming</option> </select>

    3.调用js

    $(document).ready(function() {

        $('.js-example-basic-single').select2();

    });

    关于中文提示

    看到有人引入官方文档提供的zh-cn属性和JS来处理中文,在这采用另一种简单粗暴的解决方案:直接找到JS源码进行修改即可。

    ——在源文件中找到 select2.min.js文件,ctrl+F 搜索 “Searching...”,将找到的代码改为“查找中...”,再继续搜索 “no results found”,同理修改为“无数据”。

    select2.min.css下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.css

    select2.min.js下载:https://blog-static.cnblogs.com/files/yang-xiansen/select2.min.js

    转载于:https://www.cnblogs.com/yang-xiansen/p/10298410.html

    展开全文
  • 根据地址来回填数据,如果地址栏...需求:根据地址栏参数来判断下拉数据的回填,当点击查询时,如果下拉框有值就直接走第二步,如果下拉框没有值则提示【请先选择用户】 用到的是layui的第三方插件,xm-select xm-se

    根据地址来回填数据,如果地址栏有参数,那么下拉查询需要回填对应的数据

    1、地址栏
    admin/pages/storemanage/scangetbook/scangetbook.html?userid=19&nickname=Undefine

    2、有地址参数为图一,无地址参数为图二,根据userid来回填值
    在这里插入图片描述


    在这里插入图片描述

    需求:根据地址栏参数来判断下拉数据的回填,当点击查询时,如果下拉框有值就直接走第二步,如果下拉框没有值则提示【请先选择用户】

    用到的是layui的第三方插件,xm-select

    xm-select的基础代码如下:

    xmSelect.render({
    	el: '#finduser',
    	filterable: true,  ——→ 开启搜索
    	remoteSearch: true, ——→ 开启远程搜索
    	radio: true, ——→ 单选
    	theme: {color: '#1875F0'}, ——→ 颜色
    	tips: '请输入手机号或昵称', ——→ 自定义提示
    	searchTips: '请输入手机号或昵称', ——→ 自定义搜索提示
    	on: function(data) {  } ——→ 监听选择
    	remoteMethod: function(val, cb) {  ——→ 远程方法
    		
    		api_scangetbook.findUser({
    			keyword: val
    		}).then(function(res) {
    			if (res.code == 0) {
    				if (val == '') {
    					keyworddata = res.data;
    				}
    				var obj = [];
    				res.data.forEach(function(v, i) {
    					obj.push({
    						name: v.nickname,
    						value: v.user_id
    					});
    				})
    				cb(obj);
    			} else {
    				layer.msg(common.msg(res.msg), {
    					time: 2000,
    					icon: 5
    				});
    			}
    		})
    			
     	},
    	hide: function() {  } ——→ 收起下拉时执行的事件(这里我用来重置搜索)
    	
    })
    

    扩展版:

    on监听变化

    data.arr有值(回填了)则地址栏有参数,就将【可用书籍数】这一栏显示,反之。 userMaxCapacitys(arr[0]['value']);$('.capacitybox').show(); 同时获取选中的值,有值就执行第二步,没有值就提示先选人。

    data.isAdd为false,则表示没有选中值,则将【可用书籍数】这一栏隐藏,反之。
    并且通过 getvalue来给 isValue来赋值,根据isValue来判断是否提示【提示先选人】

    hide监听

    当没有用hide()时进行关键字查询会导致下次在进来时总数据就是上次查询的数据结果,所以这里用了hide来监听

    先获取选中的数据,将keyword传参值设为空 ,即可获取全部的数据,在将新的数据更新一遍,再将获取的值setValue赋值上去即可解决问题。

    var finduser = '';
    findusers();
    
    function findusers() {
    	finduser = xmSelect.render({
    		el: '#finduser',
    		filterable: true,
    		remoteSearch: true,
    		radio: true,
    		theme: {color: '#1875F0'},
    		tips: '请输入手机号或昵称',
    		searchTips: '请输入手机号或昵称',
    		on: function(data) {
    			var arr = data.arr;
    			var isAdd = data.isAdd;//监听删除变化
    			if (arr.length > 0) {
    				userMaxCapacitys(arr[0]['value']);
    				$('.capacitybox').show();
    				
    				getvalue = arr[0]['value'];//判断是否有值,没有值提示先选人
    			}
    			
    			if(isAdd == false){
    				$('.capacitybox').hide();
    				$('.capacitybox span').html('');
    				getvalue = '';
    			}
    			
    			if(getvalue != ''){
    				isValue = true;
    			}else{
    				isValue = false;
    			}
    		},
    		remoteMethod: function(val, cb) {
    			//接口数据
    			api_scangetbook.findUser({
    				keyword: val
    			}).then(function(res) {
    				if (res.code == 0) {
    					if (val == '') {
    						keyworddata = res.data;
    					}
    					var obj = [];
    					res.data.forEach(function(v, i) {
    						obj.push({
    							name: v.nickname,
    							value: v.user_id
    						});
    					})
    					cb(obj);
    				} else {
    					layer.msg(common.msg(res.msg), {
    						time: 2000,
    						icon: 5
    					});
    				}
    			})
    		},
    		hide: function() {
    			hidetags(finduser);
    		}
    	})
    }
    
    function hidetags(selector) {
    	var tagVal = selector.getValue();  ——→ 获取选中的值
    	api_scangetbook.findUser({
    		keyword: ''
    	}).then(function(res) {
    		if (res.code == 0) {
    			var obj = [];
    			res.data.forEach(function(v, i) {
    				obj.push({
    					name: v.nickname,
    					value: v.user_id
    				});
    			})
    			selector.update({ ——→ 更新新数据
    				data: obj
    			})
    			selector.setValue(tagVal); ——→ 赋值数据
    		} else {
    			layer.msg(common.msg(res.msg), {
    				time: 2000,
    				icon: 5
    			});
    		}
    	});
    }
    
    展开全文
  • 这是一款绿色清新风格的带有滚动条jQuery美化Select下拉框代码特效。
  • 代码简介:jQuery Select下拉框美化特效是一款绿色清新风格的带有滚动条下拉框代码。
  • jQuery Select下拉框美化特效是一款绿色清新风格的带有滚动条下拉框代码
  • select下拉框

    2018-03-08 11:52:13
    百度来的说option没有触发事件,需要在select中加onchange事件,我们在用到下拉列表框select时,需要对选中的&lt;option&gt;选项触发事件,其实&lt;option&gt;本身没有触发事件方法,我们只有在...
    百度来的说option没有触发事件,需要在select中加onchange事件,
    

    我们在用到下拉列表框select时,需要对选中的<option>选项触发事件,其实<option>本身没有触发事件方法,我们只有在select里的onchange方法里触发。

    想添加一个option的触发事件,在option中添加onclick 点来点去就是不会触发事件

    又在select中添加onclick 这下可好了,没选option呢就触发

    ‍‍<select id="pid" οnchange="gradeChange()">
    
        <option grade="1" value="a">选项一</a>
    
        <option grade="2" value="b">选项二</a>
    
    </select>
    
    <script type="text/JavaScript">
           function gradeChange(){
            var objS = document.getElementById("pid");
            var grade = objS.options[objS.selectedIndex].grade;
            alert(grade);
           }
    </script>
    <select name="myselect" id="myselect">
        <option value="opt1">选项1</option>
        <option value="opt2">选项2</option>
        <option value="opt3">选项3</option>
    </select>
     
    $("#myselect").change(function(){
        var opt=$("#myselect").val();
        ...
    });
    

    现在有一id=test的下拉框,怎么拿到选中的那个值呢?

    分别使用javascript原生的方法和jquery方法

    <select id="test"  name="">   
      <option   value="1">text1</option>   
      <option   value="2">text2</option>   
     </select>

    code:

    一:javascript原生的方法

      1:拿到select对象: var  myselect=document.getElementById("test");

      2:拿到选中项的索引:var index=myselect.selectedIndex ;             // selectedIndex代表的是你所选中项的index

      3:拿到选中项options的value:  myselect.options[index].value;

      4:拿到选中项options的text:  myselect.options[index].text;

    二:jquery方法(前提是已经加载了jquery库)

    1:var options=$("#test option:selected");  //获取选中的项

    2:alert(options.val());   //拿到选中项的值

    3:alert(options.text());   //拿到选中项的文本



    展开全文
  • 一组经过美化的jQuery select下拉框单选和多选插件,带搜索功能,模拟select下拉框多选菜单选择效果。
  • 带搜索功能的select下拉框实现

    千次阅读 2020-12-29 15:36:47
    这里使用的是select2插件 select2官网 官网例子 html页面: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href=...
  • 主要介绍了Angularjs实现查找筛选功能的select下拉框的详细过程及示例代码,文中通过示例介绍的很详细,相信会对大家学习使用Angularjs具有一定的参考借鉴价值,需要的朋友们可以一起来看看。
  • so,为优化用户体验,查找功能的下拉框是非常非常必要的。都知道jquery里这样的插件,但我们用的是Angularjs,更希望用双向绑定,指令的方式优雅地解决这个问题。 分析:  目标 在原来的<select ng-...
  • tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。该下拉选择框插件可以搜索相关选项,可以通过Ajax调用json数据来填充下拉框,并且它支持中文,非常实用。
  • 浏览器自带的select下拉框不仅大部分都不太美观,而且各自的浏览器select下拉框都会不同的外观和样式。这次我们要给大家分享一款基于Tether的Select下拉框美化插件,它提供了很多接口,包括初始化和获取选择值,...
  • jQuery Select下拉框分类菜单多选插件一款功能比较全面的自定义下拉菜单选项多选代码,除了可以对选项进行分类,还带有搜索功能。
  • 模糊查询的select下拉框

    万次阅读 2016-11-30 22:51:54
    最近做了一个功能,在下拉框上千条选项,这种情况下肯定不能一个一个地去找,所以在下拉框中添加了一个模糊查询的功能,很多资料都各种问题,下面是我实现的完整的实例: 下面是效果图: 可以看到文本是可以...
  • tinySelect.js是一款支持选项搜索过滤和Ajax远程加载的select下拉选择框jQuery插件。该下拉选择框插件可以搜索相关选项,可以通过Ajax调用json数据来填充下拉框,并且它支持中文,非常实用。
  • 效果图需求:点击搜索,... 接口部分 html部分js部分只需引入xm-select.js,剩下的就只有渲染了单选xmSelect.render({radio: true,})获取选中数据xmSelect.render({on({ arr, item, selected }){teacherid = item....
  • 两种实现方式 实现方式一:input和select重叠 <HTML> <HEAD> <META http-equiv='Content-Type' content='text/html; charset=gb2312'> <TITLE>js实现可输入的下拉框</TITLE> <...
  • 可编辑的select下拉框

    万次阅读 2017-08-05 16:00:09
    本文将用实例和大家分享一款基于jQuery的下拉框插件,它允许用户输入内容,同时下拉选项中会及时匹配相关选项,支持键盘操作,还支持html选项内容,当然还能让下拉的过程带有动画效果。我们来看下如何使用。HTML结构...
  • select下拉列表框支持输入模糊查询功能,设计非常的人性化,下面小编给大家分享了关键代码,大家根据自己的需求适当的添加修改,任何问题欢迎给我反馈。 关键代码如下所示: <HTML> <HEAD> <META ...
  • 今天小编就为大家分享一篇在layui框架中select下拉框监听更改事件的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 三个select下拉框一个大类,两个小类隐藏,需要在选择大类的时候,小类显示同时清除另外的小类选择的项这需求点儿..........下面是三个select:全部aabb全部aaaaa全部bjquery扩展,调用时,使用$("select")....
  • select下拉框定位

    千次阅读 2018-09-04 10:17:00
    # 第一种定位select下拉框的方法 driver.find_element_by_xpath(".//*[@id='nr']/option[3]").click() # 第二种定位下拉框的方法,先定位父元素ID,再定位子元素 parent = driver.find_element_by_id("nr") ...
  • 使用HTML中不常用的Optgroup标签给Select下拉框的选项进行分类的功能,或许你还不知道吧,其实HTML语言自带的标签中,很多类似这样被忽视的标签 ,时候它们能完成的功能甚至比我们写半天代码才能未完成的功能都...
  • Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架。亲测很好用,很好看。 ... ...layui的select组件自带搜索功能,只要在select标签里面添加属性search=”“即可。 但是如果...
  • 下拉框(select),可以多选,带有分组搜索功能

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,136
精华内容 5,254
关键字:

select下拉框带有搜索