本文主要为大家介绍了双向select控件Bootstrap Dual ListBox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下:
效果图:
@H_502_5@
一、使用
1、引用css和js文件
本文主要为大家介绍了双向select控件Bootstrap Dual ListBox的使用方法,Bootstrap Dual列表是一个为响应Twitter优化的列表框插件,它可以用在所有的现代浏览器和触摸设备上,分享给大家,具体如下:
效果图:
@H_502_5@
1、引用css和js文件
2、初始化class属性为demo1的select元素
$("#showValue").click(function () {
alert($('[name="duallistBox_demo1"]').val());
});
});
3、HTML代码
一个通用的、初始化数据的js函数:
调用:
$("#showValue").click(function () {
alert($('[name="duallistBox_demo2"]').val());
});
});
DataHandler.ashx代码:
using System;
using System.Web;
using System.Collections.Generic;
using Newtonsoft.Json;
public class DataHandler : IHttpHandler {
public void ProcessRequest (HttpContext context) {
var china = new { id = "China",name = "中国" };
var usa = new { id = "USA",name = "美国" };
var rsa = new { id = "Russia",name = "俄罗斯" };
var en = new { id = "English",name = "英国" };
var fra = new { id = "France",name = "法国" };
List
public bool IsReusable {
get {
return false;
}
}
}
效果:
本文的demo使用的开发环境:VS2013、.NET Framework4.5.
如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:
原文链接:https://www.f2er.com/jquery/51137.html