UI-Select
百分之百原创设计的前端用户界面组件之选择框组件，实现单选，多选，树形多层级选择，重复有序选择，不重复选择，父节点是否能选等交互的组件。
组件生命周期
- 调用$("#XXX").select()创建UI界面,返回 Select 对象
- 调用select.setDataSource()传入JSON数据，对组件进行重新渲染，清除已选择区域已选中词条，绑定选项触发事件
- 鼠标单击已选择区域，展开下拉面板，显示备选项树形UI界面。
- 在下拉面板中的搜索栏输入筛选条件，触发过滤事件，只展示符合条件的备选项。
- 单击备选项进行备选项选中，并在已选择区域渲染显示已选中词条。单击右侧树形展开按钮，显示当前节点下级备选项列表。
- 单击页面中非当前组件的空白区，隐藏下拉面板。
- 单击已选择区域右侧的刷新按钮，调用数据源函数，执行第2步过程。
特性
Select组件为Skeleton4j项目定制的前端组件，支持各种特殊功能。
级联支持
级联情况下，数据源由静态数据源，模式为本地模式，以JSON对象或者JSON字符串通过setDataSource(json)设置。
数据源支持
组件可运行在本地模式和远程模式下，本地模式用用于静态数据源的设置，远程模式用于搜索方式的交互数据模式。 UI界面中的搜索框支持本地数据过滤和远程数据搜索功能，根据模式的不同展示不同，本地模式展示为过滤图标；远程模式展示为搜索图标。
表单支持
组件可工作在传统的表单模式,以下代码构建一个表单，拥有两个选择框组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单提交</title>
<link href="../select.css" rel="stylesheet" />
</head>
<body>
<form action="test.do">
<!--表单包裹层-->
<div style="width: 360px; margin: 10px;">
<div class="select-ui" id="xxx"></div>
</div>
<!--表单包裹层-->
<div style="width: 360px; margin: 10px;">
<div class="select-ui" id="yyy"></div>
</div>
<input type="submit"/>
</form>
</body>
<script>
var data = {
"nodes": [{
"text": "重庆市",
"value": "023",
"selected": false,
"nodes": null
},
{
"text": "北京市",
"value": "010",
"selected": false,
"nodes": null
}]
};
var select1 = $("#xxx").select()
.setDateSource(data);
var select2 = $("#yyy").select({multiple:true})
.setDateSource(data);
</script>
</html>
GET模式下提交数据链接为
xxx=023&yyy=023&yyy=010
组件UI界面
组件参数
| 参数名 | 数据类型 | 描述 |
|---|---|---|
| width | string | 100px或25% |
| multiple | boolean | 是否多选，默认单选 |
| duplicate | boolean | 是否可以对同一选项重复选择 |
| selectParent | boolean | 是否可以选择非叶子节点的父节点作为选项 |
| placeholder | string | 占位提示信息 |
| allowClear | boolean | 是否显示刷新按钮 |
| closeOnSelect | boolean | 是否选中后关闭选择框，默认true |
| disabled | boolean | 是否失效 |
| readonly | boolean | 是否只读 |
组件API
| 方法 | 描述 | |
|---|---|---|
| select | 用于创建一个Select组件，可选传入回调函数 | |
| setDataSource | 以JSON形式设置数据源，用于第一次初始化时 | |
| getDataSource | 获取当前展示选项对应的数据源JSON | |
| setSelectedValue | 设置获取选中的选项对应的代码值，展示结果为设置的代码值数组 | |
| getSelectedValue | 获取选中的选项对应的代码值 | |
| getSelectedText | 获取选中的选项对应的文本数组 | |
| getOptions | 获取所有选项的代码值和文本数组 | |
| draw | 重新绘制组件UI界面 | |
| cleanOptions | 清空所有选项，同时清空数据源值 |
-
文档原文地址 https://github.com/angular-ui/ui-select/wiki 入门指南 简介 ui-select是AngularJS官方制作的下拉框插件，和AngularJS搭配使用，效果很好。 要求 Angular >=1.2.18 ngSanitize module添加 jQuery（旧版浏览器支持可选） Bootstrap (v3)/Select2/Selectiz
-
ui-select指令 ui-select的指令和事件 属性 选项 描述 值 默认值 multiple 多选，直接加上multiple属性 close-on-select 在多选情况下，选中一项，就关闭下拉项 boolean true append-to-body 在多选情况下，选中项追加显示 boolean false ng-disabled 控件被禁用 boolean true ng-
-
前言 最近开发的后台管理系统项目采用Vue+Element-UI技术架构，在使用Elment-UI中Select组件的时候遇到了比较多的操作难题，官网上关于这个组件的使用文档介绍的不是很详细，仅仅提供了一些基本用法，很多拓展场景都没有涉及到，在查阅了大量资料之后终于将目前的需求都完美解决了，这里整理一些Select组件的使用方案，希望能帮到有同样需求的同学。 项目已上传github，欢迎大家下载交
-
在这里需要有几个注意的问题，举例如下 <el-form-item label="新闻类别" prop="typevalue"> <el-select v-model="form.typevalue" placeholder="请选择新闻类别"> <el-option v-for="item in this.typelist.options" :key="item.id" :label=
-
关于element ui Select 下拉框 选择器回显的问题 el-select下拉框 <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value=
-
第一步:先建一个组件文件citys.vue <template> <div class="app-container"> <el-form label-width="100px"> <el-form-item label="城市" style="width:400px"> <el-select style="width: 48%; mar
-
地址：https://element.eleme.cn/#/zh-CN/component/select <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.
-
周五同事说让我找个select 下拉框又能输入又能选择的下拉框，说看看网上有没有那样的组件，结果我网上一搜还真的有ant-desigin-vue中的a-select标签可以实现，可是装这个组件折腾了一下午还是装不上，还麻烦以前的同事，我也不知道什么原因，网上说是npm版本过高，可是降低了版本还是没用，然后看了一眼element ui 官方文档，mdzz有个allow-create属性可以满足业务要
-
<el-select v-model="value" filterable placeholder="请选择" @change="select"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </e
-
本文向大家介绍AngularJS Select(选择框)使用详解，包括了AngularJS Select(选择框)使用详解的使用技巧和注意事项，需要的朋友参考一下 1、Select概述 AngularJS 中可以使用 ng-option 指令来创建一个下拉列表，列表项通过对象和数组循环输出 2、数据源为对象 选择的值为在 key-value 对中的key: 选择的值为在 key-value 对中的
-
问题内容： 在对话框中，如果选中了某个组合，则需要显示一组控件，否则显示另一组控件。即我需要2层，并且当组合被选中/未选中时，我需要在它们之间切换。我怎样才能做到这一点？ 问题答案： CardLayout 为此，如下所示。
-
问题内容： 现在，我的脚本转到页面并在出现错误消息之前打开下拉列表“ Vijesti”中的第二个对象。 这是错误： StaleElementReferenceException：消息：在缓存中找不到元素-自查找页面以来，页面可能已更改 从硒站点： 当对元素的引用现在“陈旧”时抛出。陈旧意味着元素不再出现在页面的DOM上。StaleElementReferenceException的可能原因包括但不
-
Select 选择器 当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 v-model的值为当前被选中的el-option的 value 属性值 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key=
-
当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 v-model的值为当前被选中的el-option的 value 属性值 <template> <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value
-
Select 选择器 当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 :::demo value的值为当前被选中的Option的 value 属性值 constructor(props) { super(props); this.state = { options: [{ value: '选项1', label: '黄金糕'
-
当选项过多时，使用下拉菜单展示并选择内容。 基础用法 适用广泛的基础单选 el-option 的属性 label和value是必填的。 <!--你可以通过 model 来获取每次选择的值--> <!--或者通过绑定 (modelChange)=handle 来获得每次值改变的触发--> <el-select [model]="value" placeholder="请选择" (modelChang
-
Select 列选择器 1.3.0 平台差异说明 App H5 微信小程序 支付宝小程序 百度小程序 头条小程序 QQ小程序 √ √ √ √ √ √ √ 基本使用 所有的配置模式中，都要求传入数组的元素(对象)中含有value和label属性(可以通过value-name和label-name参数自定义)， value用于在回调时，区别选择了哪一个(针对开发者)，label用于展示在选择器中，供用