Select 选择器 - jtbc文档 - 吴忠辉的博客

当选项过多时，使用下拉菜单展示并选择内容。J5 这种相应的组件比较丰富，下面一一介绍。

jtbc-field-selector

基础用法

默认状态：

<jtbc-field-selector data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-selector>

当 width 设置为100%：

当 width 设置为180：

当 width 设置为180px：

<jtbc-field-selector width="100%" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="width 为 100%"></jtbc-field-selector>
<jtbc-field-selector width="180" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-selector>
<jtbc-field-selector width="180px" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-selector>

禁用

禁用属性 disabled：

<jtbc-field-selector disabled data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="禁用"></jtbc-field-selector>

搜索

一般用于，选项比较多的情况下的筛选。示例中就两个选项，不必启用搜搜，这里仅做演示。

搜索属性 searchable：

<jtbc-field-selector searchable data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-selector>

搜索说明 search-placeholder：

<jtbc-field-selector search-placeholder="搜索" searchable data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-selector>

事件 selected

selected 是下拉选项被选中后触发的事件。

示例：

//jtbcFieldSelector 组件监听 selected
const jtbcFieldSelector =  document.querySelector('#jtbc-field-selector');
if (jtbcFieldSelector != null) {
   jtbcFieldSelector.addEventListener('selected',  function(e) {
      alert(e.target.value); // 弹出选项值
   });
}

方法 closeSelector

关闭打开的下拉框。用法示例参考 Cascader 级联选择器的 closeSelector 方法

jtbc-field-select2

这个组件和上面的组件相比，少了搜索部分，其余相同

基础用法

默认状态：

<jtbc-field-select2 data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-select2>

当 width 设置为100%：

当 width 设置为180：

当 width 设置为180px：

<jtbc-field-select2 width="100%" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="width 为 100%"></jtbc-field-select2>
<jtbc-field-select2 width="180" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-select2>
<jtbc-field-select2 width="180px" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-select2>

禁用

禁用属性 disabled：

<jtbc-field-select2 disabled value="1" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="禁用"></jtbc-field-select2>

事件 selected

selected 是下拉选项被选中后触发的事件。示例同 jtbc-field-selector 组件

方法 closeSelector

关闭打开的下拉框。用法示例参考 Cascader 级联选择器的 closeSelector 方法

jtbc-field-multi-select

这是一个可以多选的，下拉选择器

基础用法

默认状态：

<jtbc-field-multi-select data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="请选择"></jtbc-field-multi-select>

当 width 设置为100%：

当 width 设置为180：

当 width 设置为180px：

<jtbc-field-multi-select width="100%" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="width 为 100%"></jtbc-field-multi-select>
<jtbc-field-multi-select width="180" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-multi-select>
<jtbc-field-multi-select width="180px" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-multi-select>

max 属性

用来设置最多能选多少项

max 设置为 1 试试：

<jtbc-field-multi-select max="1" data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]"></jtbc-field-multi-select>

禁用

禁用属性 disabled：

<jtbc-field-multi-select value="["1"]" disabled data="[{"value": "1", "text":"选项一"},{"value": "2", "text":"选项二"}]" placeholder="禁用"></jtbc-field-multi-select>

事件 selected

selected 是下拉选项被选中后触发的事件。示例同 jtbc-field-selector 组件

方法 closeSelector

关闭打开的下拉框。用法示例参考 Cascader 级联选择器的 closeSelector 方法

jtbc-field-tree-selector

这是一个树形选择器

基础用法

默认状态：

<jtbc-field-tree-selector value="["1","3","5"]" data="[{"id":1,"title":"选项一","father_id":0,"children":[{"id":3,"title":"选项三","father_id":1,"children":[{"id":5,"title":"选项五","father_id":3},{"id":6,"title":"选项六","father_id":3}]},{"id":4,"title":"选项四","father_id":1}]},{"id":2,"title":"选项二","father_id":0}]"></jtbc-field-tree-selector>

禁用

禁用属性 disabled 用法同以上组件

jtbc-select 选择器

此组件属于 自定义内置元素 ，这里只介绍自定义属性用法。

基础用法

<select is="jtbc-select" value="2" width="300">
	<option value="1">选项一</option>
	<option value="2">选项二</option>
</select>

这个组件自定义属性有两个，其余继承自原生元素select

value : 用于设置选中的选项
width : 用于设置组件的宽，可以设置为“纯数字”，也可以加上单位如“300px”

jtbc-field-table-selector

这是一个从弹窗列表中选择选项的选择器，一般用于内容较多，涉及内容到分页的情况。

type: checkbox | radio
credentials: include | same-origin | omit
with-global-headers:
max: 设置可以选择多少选项
href: 点击表格按钮后的响应地址
api: 根据 value 获取已选选项时的请求地址

https://juejin.cn/post/6844904149843181581
https://segmentfault.com/a/1190000040382836
https://developer.mozilla.org/zh-CN/docs/Web/API/Request/credentials