你知道吗,如何使用select2插件实现下拉框一次性选多个值、以及数据的回显
2018-02-13 10:07
721 查看
页面展示标签
<td class="vatop rowform" style="width:auto;">
<select style="width: 285px;" class="combox" name="investmentMethod" id="investmentMethod" multiple
required>
<#if investmentList?if_exists>
<#list investmentList as inverstment>
<option value="${inverstment}" selected>${inverstment}</option>
</#list>
</#if>
<option value="不限">不限</option>
<option value="合资">合资</option>
<option value="合作">合作</option
<option value="独资">独资</option>
<option value="技术转让">技术转让</option>
<option value="补偿贸易(回购)">补偿贸易(回购)</option>
<option value="并购">并购</option>
<option value="BOT">BOT</option>
<option value="其他">其他</option>
</select>
</td>
访问页面时,需要加载到浏览器内核的脚本以及样式
<script type="text/javascript" src="${base}/res/js/select2/select2.min.js"></script>
<link href="${base}/res/css/select2/select2.min.css" rel="stylesheet"/>
页面加载时下拉框实现这个函数的处理之后即可用
$(document).ready(function () {
$('#investmentMethod').select2();
});
//回显的值有重复的怎么办,去除、只选一个
$(document).ready(function(){
$("#investmentMethod option").each(function() { /*作用:遍历select option */
var getText = $(this).text();
if($("#investmentMethod option:contains("+getText+")").length > 1) /*作用:select option:contains("+text+")")包含text的个数 */
{
$("#investmentMethod option:contains("+getText+"):gt(0)").remove(); /*作用:包含text大于个数0的选项就移除*/
}
});
});
<td class="vatop rowform" style="width:auto;">
<select style="width: 285px;" class="combox" name="investmentMethod" id="investmentMethod" multiple
required>
<#if investmentList?if_exists>
<#list investmentList as inverstment>
<option value="${inverstment}" selected>${inverstment}</option>
</#list>
</#if>
<option value="不限">不限</option>
<option value="合资">合资</option>
<option value="合作">合作</option
<option value="独资">独资</option>
<option value="技术转让">技术转让</option>
<option value="补偿贸易(回购)">补偿贸易(回购)</option>
<option value="并购">并购</option>
<option value="BOT">BOT</option>
<option value="其他">其他</option>
</select>
</td>
访问页面时,需要加载到浏览器内核的脚本以及样式
<script type="text/javascript" src="${base}/res/js/select2/select2.min.js"></script>
<link href="${base}/res/css/select2/select2.min.css" rel="stylesheet"/>
页面加载时下拉框实现这个函数的处理之后即可用
$(document).ready(function () {
$('#investmentMethod').select2();
});
//回显的值有重复的怎么办,去除、只选一个
$(document).ready(function(){
$("#investmentMethod option").each(function() { /*作用:遍历select option */
var getText = $(this).text();
if($("#investmentMethod option:contains("+getText+")").length > 1) /*作用:select option:contains("+text+")")包含text的个数 */
{
$("#investmentMethod option:contains("+getText+"):gt(0)").remove(); /*作用:包含text大于个数0的选项就移除*/
}
});
});
相关文章推荐
- 关于UEditor插件的使用以及UEditor数据回显问题,数据库存储标签代码前台页面如何解析问题小结
- Select2插件的用法,通过ajax实现在下拉框中回显
- 如何利用jquery获取下拉框中所选的内容以及select里value的使用
- 如何使用A*插件实现移动以及网格的动态生成
- Android学习笔记---19_采用ListView实现数据列表显示,以及各种适配器使用,和如何写自己的适配器
- 使用jquery-combobox实现select下拉框多选之后,如何将下拉框的值传给input隐藏域
- angularjs中的下拉框,以及数据的回显,并且还可以实现下拉框的功能
- ASP.NET MVC AJAX实现 以及如何处理json数据,简介
- 图形的绘制,如何使用自定义画笔(颜色,线宽,线形)。如何为程序中添加选项菜单和选项设置对话框,如何使用标准颜色对话框,如何使用字体对话框,在选项对话框中实现预览功能。实现选项对话框和窗口类中的数据交换。如何改变对话框和控件的背景色,如何改变控件的文本颜色,
- 转载---使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 知道如何用.NET在AutoCAD中添加一个插件来显示图纸集数据吗?
- 在使用exp/imp时如何实现导入数据到指定的表空间
- vi 中如何使用 :s 命令实现字串的替换以及对参数分隔符解释
- 详解如何使用jquery插件jQuery.Validate实现客户端验证
- 如何使用JS选中C#前台select中的optton数据项
- 关于字符和数字类型的索引,Oracle如何实现内部自动转换以及索引使用的验证测试
- 如何在列表数据中使用打印按钮实现打印预览
- [VB.NET]请教高手:如何使用listview控件从缓冲区中一次性添加多条数据???
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动
- 使用Ajax实现DropDownList和ListBox的联动以及两个ListBox之间数据的移动