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

jquery的selectBoxIt控件使用

2015-12-11 14:14 736 查看
selectBoxIt控件可以用来代替简单的html5的
<select>
标签,使用很方便。

html代码如下:

<script type="text/javascript">
jQuery(document).ready(function($) {
$("#select-voyageedit").selectBoxIt();
});
</script>
<select class="form-control" id="select-voyageedit">
<option></option>//这里加了一个空的选项,也可以删除,没什么意义
</select>


js代码

if($("#select-voyageadd").data("selectBox-selectBoxIt").listItems.length==1)
{
$.ajax({
type : "POST",
url : "***********.action", // 请求地址,后面可以传参
error : function() {// 下面是前台的处理操作,自己可以按需求修改
alert("发生错误");
// 发生错误再请求一次
},
data : {
},
dataType : "json",
success : function(data) {// 下面是前台的处理操作,自己可以按需求修改
if (data != null) {
$("#select-voyageadd").data("selectBox-selectBoxIt").remove();//首先清空select控件中的选项
$("#select-voyageadd").data("selectBox-selectBoxIt").add({ value: '0', text: '未知航次'});//添加一个未知航次的选项
$.each(data, function(n, value) {
$("#select-voyageadd").data("selectBox-selectBoxIt").add({ value: value.voyageid, text: value.vchinese});//将获取的数据添加到select选项中
});
} else {
alert("数据为空");
}
}
});
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: