您的位置：首页 > Web前端 > JQuery

jquery multiselect, 多选下拉框的使用

2014-08-13 10:35 543 查看

在项目中碰到了在jsp页面添加多选下拉框的情况，并且要把选中的对象的value值传给后台处理。

一、multiselect的demo源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>jQuery MultiSelect Widget Demo</title>
<link rel="stylesheet" type="text/css" href="jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="jquery-ui.css" />
<script type="text/javascript" src="jquery.1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.js"></script>
<script type="text/javascript">
$(function(){

$("#example").multiselect({
header: false,
height: 200,
minWidth: 200,
selectedList: 10,//预设值最多显示10被选中项
hide: ["explode", 500],
noneSelectedText: 'Please select an option',
close: function(){
var values= $("#example").val();
$("#hfexample").val(values);
}
});

});
</script>
</head>
<body>
<h2>Displaying options in a list</h2>
<p>
<select id="example" name="example" multiple="multiple" style="width:400px">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6">Option 6</option>
<option value="option7">Option 7</option>
</select>
<input type="hidden" id="hfexample" />
</p>

<h1>
<!--刷新后，multiselect 还可以显示之前的选中项-->
<!-- 类型：<select id="Category" name="Category" multiple="multiple" style="width: 100px">
<option value="0" <% if((","+searchCategoryID+",").IndexOf(",0,")>-1) { %> selected="selected" <%} %> >请选择类型</option>
<option value="1" <% if((","+searchCategoryID+",").IndexOf(",1,")>-1) { %> selected="selected" <%} %> >1</option>
<option value="2" <% if((","+searchCategoryID+",").IndexOf(",2,")>-1) { %> selected="selected" <%} %> >2</option>
</select>
<asp:HiddenField ID="hfCategory" runat="server" />  -->
</h1>
</body>
</html>

注意：该文件引用的js和css需要自行下载
二、获取多选框选中对像的value的源码
var result = '';
$('input[name=example[]]:checked').each(function() { if (result != '') { result += ',' } result += $(this).val() });

alert(result);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航