Question

html multi select控件怎么提交form

Answer 1

html multi select控件提交form：
一、multiselect 是一个开源插件，官网地址https://github.com/ehynds/jquery-ui-multiselect-widget， 相关文档地址http://www.erichynds.com/blog/jquery-ui-multiselect-widget（打不开） ，看了下代码的提交时间，2年到5年前提交的，最近无更新。项目中有用到下拉选择框多选的情况，就研究了下使用方法，detail is below:

二、首先下载https://github.com/ehynds/jquery-ui-multiselect-widget/archive/master.zip 解决后放到项目里，主要引用到的js和css有：
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.js}"></script>
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.js}"></script>
<script type="text/javascript" th:src="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery.multiselect.js}"></script>
<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/jquery.multiselect.css}" />
<link rel="stylesheet" type="text/css" th:href="@{/static/js/core/jquery-ui-multiselect-widget-master/src/jquery-ui.css}" />
下载下来的压缩包里提借的示例 引用的 jquery-ui是google的公共库，国内调不了，所以打开很慢直到超时，自己另外下个jquery-ui改成引用本地的。
用法很简单：
$("#RECEIVE_GOODS").multiselect(
{

close: function(){//获取选中的值，在下拉框关闭时触发的
var value = $("#RECEIVE_GOODS").multiselect("getChecked").map(function(){
return this.value;
}).get();
$("#RECEIVE_GOODS").val(value);
},
open: function(){//打开 选中初始化，不是很完美，是在点下后处理的，不能在初始化是显示选中的条数
var vv = document.getElementById("RECEIVE_GOODS").attributes[0].nodeValue;//$("#RECEIVE_GOODS").val();
var chks = $("#RECEIVE_GOODS").multiselect("getChecks");
if(null != chks && undefined != chks && chks.length > 0){
for(var i = 0; i < chks.length; i++){
var ck = chks[i];
if(null != vv &&　undefined != vv && "" != vv){
var vvs = vv.split(",");
for(var j = 0; j < vvs.length; j++){
if($.trim(ck.value) == $.trim(vvs[j])){
ck.checked = true;
}
}
}
}
}

}

}
三、其它支持的一些相关事件和回调方法

Parameter
Description
Default

showHeader A boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links. true
maxHeight The maximum height in pixels of the scrolling container that holds the checkboxes. 175
minWidth The minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element. 200
checkAllText The default text of the “Check all” link. Check all
unCheckAllText The default text of the “Uncheck all” link. Uncheck all
noneSelectedText
Renamed from noneSelected in 0.5!
The default text the select box when no options have been selected.
Select options

selectedList A boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled. false
selectedText The text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”.
New in 0.5!
As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples.
# selected

position The position of the options menu relative to the input control: top, middle, or bottom. bottom
shadow A boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow). false
fadeSpeed How fast (in ms) to fade out the options menu on close. 200
state
New in 0.5!
The default state of the widget. Either open or closed.
closed

disabled
New in 0.5!
Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this.
false

onCheck A callback to fire when a checkbox is checked. Function
onOpen A callback to fire when the options menu is opened. Function
onCheckAll A callback to fire when the “Check all” link is clicked. Function
onUncheckAll A callback to fire when the “Uncheck all” link is clicked. Function
onOptgroupToggle A callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument.