jQuery UI MultiSelect Widget使用实现步骤

1、引入CSS文件

<!-- jquery ui 使用的样式 -->
<link rel="stylesheet" type="text/css" href="../../common/jquery/jquery-ui/jquery-ui-1.10.3/themes/redmond/jquery-ui-1.10.3.custom.css" />
<!-- jquery ui multiselect 使用的样式 -->
<link rel="stylesheet" type="text/css" href="../../common/jquery/jquery-ui/multiselect/jquery.multiselect.css" />

2、引入JS文件

<script type="text/javascript" src="../../common/jquery/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/jquery-ui-1.10.3/ui/minified/jquery-ui.min.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/multiselect/src/jquery.multiselect.js"></script>
<script type="text/javascript" src="../../common/jquery/jquery-ui/multiselect/i18n/jquery.multiselect.zh-cn.js"></script>

3、编写HTML

<select id="comCode4QueryArrStr_query" name="paramsUser.comCode4QueryArrStr" multiple="multiple">
    <option value='xx'>xx</option>
    <option value='xx'>xx</option>
    <option value='xx'>xx</option>
</select>

4、调用MultiSelect方法渲染<select>

$j(document).ready(function(){
    $j("#comCode4QueryArrStr_query").multiselect();
}

更多参考:
http://www.erichynds.com/blog/jquery-ui-multiselect-widget
http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值