引导多选插件的使用步骤和常用参数配置详解
首先,介绍所需的JS和CSS文件
由于它是基于jQuery的自举插件,所以很明显,这两种类型的文件是导入的。
二、创建下拉列表
创建的下拉列表的形式如下所示:
奶酪
西红柿
莫泽雷勒干酪
蘑菇
意大利辣味香肠
洋葱
三,应用此插件
$(文档)Ready(函数(){)
$(# test)。Multiselect();
});
所得结果如下图所示。
当然可以选择该选项,当然,如果删除属性多 ,则它将成为单个选择的下拉列表。
$(#例单)。Multiselect();
选项1
选项2
选项3
选项4
选项5
选项6
结果如下:
这些是最基本的情况,如果你想知道如何深入应用,我们需要知道一些相应的参数配置。
四、参数配置描述
1多个
当有这个属性的下拉列表可以选择,相反,只为无线电
2 enableclickableoptgroups
配置此属性时,可以对其进行分类或分组。
它只需要配置如下:
$(文档)Ready(函数(){)
$(#例enableclickableoptgroups)。Multiselect({
enableclickableoptgroups:真
});
});
注:如enableclickableoptgroups表示该选择ID。以下是相同的。
3 enablecollapsibleoptgroups
设置此属性后,下拉列表可以折叠并使用。
它需要配置为:
$(文档)Ready(函数(){)
$(#例enableclickableoptgroups)。Multiselect({
enablecollapsibleoptgroups:真
});
});
4最大高度设置最大高度
这是用来设置下拉列表的最大高度,当最大高度高于那个时,滚动条就会出现。
5 nonselectedtext设置提示选择下拉列表
当未选择下拉列表时,可以使用此属性设置提示。
例如,在上面的图片中,提示的设置是检查一个选项!
6 numberdisplayed设置输入框显示在下拉列表中内容的数量
在这个插件中,默认显示的数量是3。
7 enablefiltering设置下拉列表上的搜索框
当enablefiltering设置为true,下拉列表中会出现一个搜索输入框,可以搜索内容
选择8 includeselectalloption集
9选择选择所有selectallname名称默认设置
8和9通常一起使用,其使用结果如下:
以上是引导多选插件介绍由萧边讲解步骤和常用参数,希望对你有帮助。如果你有任何问题,请给我留言,萧边会及时回复你。