LayUI # 多选下拉框

迈不过友情╰ 2023-06-24 08:10 7阅读 0赞

我的项目中使用的是formSelects-v4.js，但是现在以及对此引用停止更新了。

现在提供一下学习网址：[https://hnzzmsf.github.io/example/example\_v4.html][https_hnzzmsf.github.io_example_example_v4.html]

目前使用的是xm-select

现在提供一下学习网址：[https://maplemei.gitee.io/xm-select/\#/basic/model][https_maplemei.gitee.io_xm-select_basic_model]

--------------------

讲讲我是怎么使用的下拉框吧。

--------------------

## 1.单项选择框 ##

首先讲讲搜索选择框（单项选择框）

显示效果如下：

![20191221164348307.png][]

没有起到选择框的效果。

修改代码如下：

![20191221164503389.png][]

成功显示搜索框样式。

--------------------

## 2.多项选择框 ##

显示效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1_size_16_color_FFFFFF_t_70][]

项目使用引用：

前台项目代码：

我的项目使用的是C\#，我在后台进行的数据绑定。

后台项目代码：

public StringBuilder list = new StringBuilder();//定义的公共参数
    
    //查询的数据，需要进行下拉框绑定
    
    list.Append(" <option value='" + dr["数据字段"] + "' selected>" + dr["数据字段"] + "</option>");

--------------------

基本参数

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>说明</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>xm-select</td> 
   <td>多选核心, 标记不同的多选, 多选ID</td> 
   <td>xm-select="id"</td> 
  </tr> 
  <tr> 
   <td>xm-select-max</td> 
   <td>多选最多选择数量</td> 
   <td>xm-select-max="3"</td> 
  </tr> 
  <tr> 
   <td>xm-select-skin</td> 
   <td>皮肤</td> 
   <td>xm-select-skin=" default | primary | normal | warm | danger "</td> 
  </tr> 
  <tr> 
   <td>xm-select-search</td> 
   <td>本地搜索 &amp; 远程搜索</td> 
   <td>xm-select-search, xm-select-search="/search", 值为空时已有条目过滤搜索, 有值时开启远程搜索</td> 
  </tr> 
  <tr> 
   <td>xm-select-create</td> 
   <td>条目不存在时创建, 标记性属性</td> 
   <td>xm-select-create</td> 
  </tr> 
  <tr> 
   <td>xm-select-direction</td> 
   <td>下拉方向</td> 
   <td>xm-select-direction="auto|up|down", 自动, 上, 下, 默认自动模式</td> 
  </tr> 
  <tr> 
   <td>xm-select-radio</td> 
   <td>单选模式</td> 
   <td>xm-select-radio, 最多只能选择一个</td> 
  </tr> 
  <tr> 
   <td>xm-select-search-type</td> 
   <td>搜索框的显示位置</td> 
   <td>xm-select-search-type="title" 在下拉选title部分显示, xm-select-search-type="dl" 在选项的第二条显示</td> 
  </tr> 
  <tr> 
   <td>xm-select-show-count</td> 
   <td>多选显示的label数量</td> 
   <td>xm-select-show-count="2", 超出后隐藏</td> 
  </tr> 
 </tbody> 
</table>

多选上限

<select name="city" xm-select="select5" xm-select-max="3">
        <option value="">啦啦, 我是自定义的</option>
        <option value="1" disabled="disabled">北京</option>
        <option value="2" selected="selected">上海</option>
        <option value="3">广州</option>
        <option value="4" selected="selected">深圳</option>
        <option value="5">天津</option>
    </select>

[https_hnzzmsf.github.io_example_example_v4.html]: https://hnzzmsf.github.io/example/example_v4.html
[https_maplemei.gitee.io_xm-select_basic_model]: https://maplemei.gitee.io/xm-select/#/basic/model
[20191221164348307.png]: https://img-blog.csdnimg.cn/20191221164348307.png
[20191221164503389.png]: https://img-blog.csdnimg.cn/20191221164503389.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191221164703248.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzE2MzEzNTc1,size_16,color_FFFFFF,t_70