Odoo 在后端用户界面中包含各种小部件，用于执行各种活动，例如 one2many、many2many、many2many_tags 等，这简化并简化了 Odoo 中选择字段的操作。因此，当我们创建包含 one2many 或 many2many 字段的表单时，很难在没有外部库的帮助下建立类似于小部件的高级选择字段。Odoo 中的这些 one2many、many2many_tags 等小部件是使用 Select2 JS 包创建的。
本博客将介绍 Select2 库为了更轻松地构建表单而创建的多种选择字段类型、其功能、实现语法和示例。
1. 简单的 Select2 字段
当使用带有大量选项的标准 Select 标签时，访问者很难从众多选项中找到他们想要的选项。Select2 提供了一种易于使用的内置过滤机制，允许用户在 select 元素中过滤和搜索选项。
为了创建它，我们必须向选择标签提供一个选择器（类或 ID）。
在下面的示例中，我们使用 Class 作为选择器。
<select style="width:300px" class="advanced-select"><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option>
</select>接下来，我们使用选择器类 advanced-select 从 JS 文件中激活 select2。
function applySelect2() {self.$('select.advanced-select').select2();};
applySelect2();
添加 select2 增强功能后，我们现在有一个具有实时搜索过滤功能的新选择字段，如下图所示。
2. 带分组的 Select2
接下来我们将创建带有分组选项的 Select2 字段。optgroup> 标签用于此。
<select style="width:300px" id="source2"><option/><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup>
</select>
select2 选择标签改进由如下所示的 JS 代码启用。在本例中，选择器是 select 标签的 id。
function applySelect2() {$('select#source2').select2();};
applySelect2();
下图显示了具有分组元素的 select2 字段的示例。
3. 选择 2 并启用清除选项
然后，我们将构建一个带有清除选项的示例 select2 增强字段。我们使用 JS 文件的属性“allowClear: true”来提供清除选项。
<select id="custom-select" style="width:300px"><option/><optgroup label="Alaskan/Hawaiian Time Zone"><option value="AK">Alaska</option><option value="HI">Hawaii</option></optgroup><optgroup label="Pacific Time Zone"><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option></optgroup>
通过打开清除选项，用户可以选择清除选择标签中选择的选项并将其留空（如果他们愿意的话）。
function applySelect2() {self.$('#custom-select').select2({allowClear: true,});};
applySelect2();
});
此处提供了示例图像，要清除选择，请单击所选选项后出现的 x 符号。
4. Select2 带多项选择
接下来，我们创建一个启用多选的 select2 字段。我们向 select 标签添加多个选项，以便访问者可以从列表中选择多个选项。
以下是代码示例。
<select style="width:300px" class="advanced-select" multiple=""><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option><option value="AZ">Arizona</option><option value="CO">Colorado</option>
</select>
然后，与简单的 select2 示例类似，我们利用 JS 将 select2 与 select 标签连接起来。
function applySelect2() {self.$('#custom-select').select2({});};
applySelect2();
});
下面是启用了多项选择的 select2 的示例。
5. Select2 占位符
然后将启用 select2 字段的占位符。此选项在 JS 文件中使用 select2 属性 Placeholder 启用。
function applySelect2() {self.$('#custom-select').select2({placeholder: 'Select an Option',});};
applySelect2();
});
注意：为了以这种方式添加占位符，我们必须确保选择字段的首选为空，如下面的代码示例所示。
<select style="width:300px" id="source1"><option /><option value="AK">Alaska</option><option value="HI">Hawaii</option><option value="CA">California</option><option value="NV">Nevada</option><option value="OR">Oregon</option><option value="WA">Washington</option>
</select>
当未选择任何选项时，占位符将出现在 select2 区域中，如附图所示。
6. 选择 2 并输入最小值/最大值搜索
Select2 提供了一个启用最小和最大搜索输入长度的选项，允许我们根据这些参数选择激活和停用过滤所需的最小和最大长度。当有大量可用数据集时，小的搜索字符串不足以进行有效过滤。因此，最小属性很有用。
下图是如何启用最小和最大搜索长度限制的示例。
function applySelect2() {self.$('#custom-select').select2({minimumInputLength: 3,maximumInputLength: 10});};
applySelect2();
});
这里您可以看到，只有满足最小输入长度属性时才会激活过滤。还提供了一个示例结果图像。
7. Select2 带最大选择限制
在本部分中，我们将为启用多选功能的 select2 字段设置最大可用选项数。为此，如下例所示，我们利用 JS 属性 MaximumSelectionSize 来确定上限。
function applySelect2() {self.$('#custom-select').select2({maximumSelectionSize: 2});};
applySelect2();
});
选择字段允许访问者最多选择两个选项，如上例所示。当用户做出选择时，select2 会动态调整，如下例所示。
Select2 JS 包还提供了许多其他属性和功能。其中一些是
宽度 - 规定 select2 的宽度样式属性。
Id——用于从所选选项中获取 id。
锁定：此属性用于防止访问者更改所选选项的状态。
已禁用-用于使可选选项不可用，以便用户不会无意中选择它们。
标记器：此功能将用户在搜索区域中输入的输入转换为可用的选择。
查询：当动态加载数据时，该函数用于查询结果。
从本质上讲，Odoo 的原生小部件与 Select2 等外部库之间的协同作用为开发人员开辟了无限可能，使他们能够制作出完全符合应用程序要求的定制和高级选择字段。内置功能和外部工具的融合体现了 Odoo 对灵活性和可扩展性的承诺，为在选择字段领域及其他领域创建定制解决方案提供了一个强大的平台。
