下拉框

用法

模拟<select>表单由块化标签组成,并且组件结构不可变更。

  • option xxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 工商银行体育西分行
  • 工商银行广州总行
  • 工商银行天河支行

    <div class="form-control-dropdown">
    <span class="form-control-dropdown-btn">
    <i></i>
    </span>
    <div class="form-control-dropdown-value" title="请选择一个选项" aria-expanded="false">请选择一个选项</div>
    <ul class="form-control-dropdown-menu  id="j-dropdown-ul"">
    <li title="option one">
    option one
    </li>
    <li title="option two">
    option two
    </li>
    <li title="option three">
    option three
    </li>
    </ul>
    </div>

    <button class="btn primary" id="j-select-menu">默认选中</button>

    <script>
     // 默认选中
        $('#j-select-menu').on('click', function(){
            $('#j-dropdown-ul li').eq(1).trigger('click')
          })
        // 默认选中第一个
        $('#j-dropdown-ul li').eq(0).trigger('click')
    </script>

可输入带过滤

只需将div改为<input>标签,添加属性data-toggle="dropdown"

  • option xxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
  • 工商银行体育西分行
  • 工商银行广州总行 123
  • 工商银行广州总行
  • 工商银行广州总行 456
  • 工商银行天河支行
    
        <input type="text" data-toggle="dropdown" class="form-control" id="form-control-example8" placeholder="请出入文字" value="" aria-expanded="true">

        <ul class="form-control-dropdown-menu"> ...
    

事件监听

$(element).on('selected.ui.dropdown', function(e, obj){});

  • option xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
  • option one
  • option two
  • option three
  • option four
  • option five
   $(element).on('selected.ui.dropdown', function(e, obj){});
                            

自动填充

data-toggle="dropdown"元素增加data-auto="xxx"可启动默认必选功能

  • 招商银行
  • 工商银行
  • 建设银行
  • 农业银行
  • 中国银行
  • 交通银行
  • 平安银行
  • 邮政银行
  • 上海银行
  • 温州银行
  • 浦发银行
  • 中信银行
  • 广发银行
  • 民生银行
  • 兴业银行
  • 光大银行
  • 上海农商银行
  • 北京银行
  • 北京农商银行
  • 深圳发展银行
  • 宁波银行
  • 杭州银行
  • 东莞银行
  • 汇丰银行
  • 东亚银行
  • 广州农商银行
  • 华夏银行
  • 华润银行
  • 兰州银行
  • 河北银行
  • 微商银行
  • 青岛银行
  • 尧都农商
  • 浙商银行
  • 南昌银行
  • 渤海银行
  • 恒丰银行
  • 天津银行
<input type="text" data-toggle="dropdown" data-auto="bank" class="form-control" id="form-control-example" placeholder="请出入文字" value="">