1075人阅读
学习笔记（68）
jquery（22）
首先是ajax填充插件FillOptions，这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框，数据格式支持xml格式和json格式，插件定义如下&&&&&&& FillOptions(url,options)&&& 参数说明&&&&&&& url：ajax请求的地址，必须 options包括如下参数&&&&&&& datatype：ajax请求返回的数据格式,可以是&xml”或&json”，默认为&json”&&&&&&& textfield：ajax请求返回的数据中下拉列表框选项文本的字段，默认为&text”&&&&&&& valuefiled：ajax请求返回的数据中下拉列表框选项值的字段，默认为&value”&&&&&&& keepold：布尔类型，是否保留下拉列表框选项原有选项，默认为不保留&&&&&&& selected：数值型，填充选项后第几项为选中状态，默认为0&&& 实例如下：&& $(&#Select1&).FillOptions(&handler1.ashx?type=json&,{datatype:&json&,textfield:&province&,valuefiled:&provinceID&});&&&& 实例说明：Select1是页面上一个下拉列表框，通过访问&handler1.ashx?type=json&这个地址，返回“[{&provinceID&:&110000&,&province&:&北京市&},{&provinceID&:&120000&,&province&:&天津市&}]”这样格式的数据，然后通过指定的textfield和valuefiled参数，生成下拉列表框的option并添加到Select1。更多例子可以看下载中的test.htm&&& 下拉列表框联动插件CascadingSelect，这个插件是基于上面FillOptions插件制作的，可以实现两个下拉列表框的联动，定义如下：&&&&&&& CascadingSelect(target,url,options,endfn)&&& 参数说明：&&&&&&& target:需要联动的下拉列表框，必须&&&&&&& url：ajax请求的地址，必须 options与FillOptions的类似，增加了一个参数&&&&&&& parameter：ajax请求时传回值的参数名，必须&&&&&&& endfn：类型是function，完成联动后执行&&& 实例如下：&&&&&&&&&&& $(&#Select1&).CascadingSelect(&&&&&&&&&&&&&&&&&&&&&&&&&&& $(&#Select2&),&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& &handler1.ashx?type=json&,&&&&&&&&&&&&&&&&&&&&&&&&&& {datatype:&json&,textfield:&city&,valuefiled:&cityID&,parameter:&p&},&&&&&&&&&&&&&&&&&&&&&&&&& function(){&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& $(&#Select2&).AddOption(&请选择&,&-1&,true,0);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& $(&#Select3&).html(&&);&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& $(&#Select3&).AddOption(&无选项&,&-1&,true,0);&&&&&&&&&&&&&&&&&&&&&&&&& }&&&&&&&&&&& );&&& 实例说明：Select1,Select2,Select3都是页面上的下拉列表框，通过设置parameter:”p”这个参数会生成一个&handler1.ashx?p=xxx&type=json”这样的地址来做ajax请求，xxx为select1所选择的值，返回后使用FillOptions来填充Select2的option。具体实例请看test1.htm中实现的省市区的三级联动。&&& 添加一个列表项的插件AddOption，这个比较简单，用来向下拉列表框中添加一个列表项。定义如下：&&&&&&& AddOption (text,value,selected,index)&&& 参数说明：&&&&&&& text：文本型，列表项文本&&&&&&& value：文本型，列表项值&&&&&&& selected：布尔型，是否选择加入的列表项 index：数值型，加入位置&&& 实例如下： $(&#Select2&).AddOption(&请选择&,&-1&,true,0);&&& 实例说明：向select2最上端插入一个文本为“请选择“，值为”-1“的列表项，并且是选中状态&&& 下载地址http://bbs./viewthread.php?tid=637&extra=page%3D1或者是http://download.csdn.net/user/luq885
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：204100次
积分：2459
积分：2459
排名：第15015名
原创：36篇
转载：81篇
评论：38条
(3)(3)(11)(1)(2)(2)(2)(7)(10)(40)(6)(5)(9)(1)(1)(2)(2)(3)(3)(1)(3)（转）jQuery ajax填充select的插件 - 雪狐BLOG - ITeye博客
博客分类：
注意：这个与jquery easyui插件有冲突，使用此插件后，easyui的datagrid中的singSelect将会失效
首先是ajax填充插件FillOptions，这个插件可以通过ajax方法获取数据并把数据添加到下拉列表框，数据格式支持xml格式和json格式，插件定义如下
FillOptions(url,options)
url：ajax请求的地址，必须
options包括如下参数
datatype：ajax请求返回的数据格式,可以是”xml”或”json”，默认为”json”
textfield：ajax请求返回的数据中下拉列表框选项文本的字段，默认为”text”
valuefiled：ajax请求返回的数据中下拉列表框选项值的字段，默认为”value”
keepold：布尔类型，是否保留下拉列表框选项原有选项，默认为不保留
selected：数值型，填充选项后第几项为选中状态，默认为0
实例如下：
$("#Select1").FillOptions("handler1.ashx?type=json",{datatype:"json",textfield:"province",valuefiled:"provinceID"});
实例说明：
Select1是页面上一个下拉列表框，通过访问"handler1.ashx?type=json"这个地址，
返回“[{"provinceID":"110000","province":"北京市"},
{"provinceID":"120000","province":"天津市"}]”
这样格式的数据，然后通过指定的textfield和valuefiled参数，
生成下拉列表框的option并添加到Select1。更多例子可以看下载中的test.htm
下拉列表框联动插件CascadingSelect，这个插件是基于上面FillOptions插件制作的，
可以实现两个下拉列表框的联动，定义如下：
CascadingSelect(target,url,options,endfn)
参数说明：
target:需要联动的下拉列表框，必须
url：ajax请求的地址，必须
options与FillOptions的类似，增加了一个参数
parameter：ajax请求时传回值的参数名，必须
endfn：类型是function，完成联动后执行
实例如下：
$("#Select1").CascadingSelect(
$("#Select2"),
"handler1.ashx?type=json",
{datatype:"json",textfield:"city",valuefiled:"cityID",parameter:"p"},
function(){
$("#Select2").AddOption("请选择","-1",true,0);
$("#Select3").html("");
$("#Select3").AddOption("无选项","-1",true,0);
实例说明：
Select1,Select2,Select3都是页面上的下拉列表框，通过设置parameter:”p”这个参数会生成一个
"handler1.ashx?p=xxx&type=json”这样的地址来做ajax请求，
xxx为select1所选择的值，返回后使用FillOptions来填充Select2的option。
具体实例请看test1.htm中实现的省市区的三级联动。
添加一个列表项的插件AddOption，这个比较简单，用来向下拉列表框中添加一个列表项。
定义如下：
AddOption (text,value,selected,index)
参数说明：
text：文本型，列表项文本
value：文本型，列表项值
selected：布尔型，是否选择加入的列表项
index：数值型，加入位置
实例如下：
$("#Select2").AddOption("请选择","-1",true,0);
实例说明：
向select2最上端插入一个文本为“请选择“，值为”-1“的列表项，并且是选中状态
浏览: 330079 次
来自: 北京
groovy用的多吗？我还没发现有哪个java项目在用这个？
在网上搜到的几乎全是说满了就扩充。但是我有个疑问，满了就扩充， ...
好东西啊，就用这个包。基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用
作者：伍华聪
字体：[ ] 类型：转载 时间：
本文主要给大家介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验，
在上篇，介绍了数据的分页处理，使用了Bootstrap Paginator插件，另外对树形列表，采用了JSTree插件，本篇继续介绍在编辑页面中常用到的控件Select2，这个控件可以更加丰富传统的Select下拉列表控件，提供更多的功能和更好的用户体验。
1、Select2控件介绍
这个插件是基于Select的扩展插件，能够提供更加丰富的功能和用户体验，它的github官网地址为:，具体的使用案例，可以参考地址：。
我们在整个框架里面，用到了很多Select2控件来处理内容的显示，包括单选的下拉列表（包括级联选择框）、复选的下拉列表、树形下拉列表等方式，界面效果如下所示。
1）编辑界面下的省份、城市、所在行政区的级联界面效果，选择省份，会加载对应省份下的城市，选择城市，会继续加载城市下的行政区，从而实现多级关联的下拉列表效果。
2）编辑界面下的多项选择下拉列表
但我们选择其中的内容的时候，系统自动显示出没有选择的列表数据，非常直观友好，如下所示。
3）树形列表的下拉列表
有时候，我们的一些数据可能有层次关系的，如所属机构、上层列表等等。
2、Select2控件的实际使用代码分析
1）基础界面代码及操作
使用select2控件，一般是在常规的select控件上，设置一下即可（设置它的class为select2）。
&div class="col-md-6"&
&div class="form-group"&
&label class="control-label col-md-4"&重要级别&/label&
&div class="col-md-8"&
&select id="Importance" name="Importance" class="form-control select2" placeholder="重要级别..."&&/select&
&div class="col-md-6"&
&div class="form-group"&
&label class="control-label col-md-4"&认可程度&/label&
&div class="col-md-8"&
&select id="Recognition" name="Recognition" class="form-control select2" placeholder="认可程度..."&&/select&
如果是固定列表，那么也就是设置它的Option内容即可，如下所示。
&div class="col-md-6"&
&div class="form-group"&
&label class="control-label col-md-4"&吸烟&/label&
&div class="col-md-8"&
&select id="Smoking" name="Smoking" type="text" class="form-control select2" placeholder="吸烟..."&
&option&吸烟&/option&
&option&不吸烟&/option&
简单的select2控件初始化代码如下所示。
$(document).ready(function() {
$(".js-example-basic-single").select2();
一般情况下，如果允许复选多个项目，那么设置multiple="multiple"即可，如下代码所示。
&select id="ResponseDemand" name="ResponseDemand" multiple="multiple" class="form-control select2"&&/select&
2）异步数据绑定操作
一般情况下，我们的select控件的数据，是从数据库里面动态加载的，因此一般是通过Ajax方式获取数据并进行绑定即可。
基于代码可重用性的考虑，我们编写一个公用的JS函数，用来减少绑定操作的代码，提高代码重用性。
//绑定字典内容到指定的Select控件
function BindSelect(ctrlName, url) {
var control = $('#' + ctrlName);
//设置Select2的处理
control.select2({
allowClear: true,
formatResult: formatResult,
formatSelection: formatSelection,
escapeMarkup: function (m) {
//绑定Ajax的内容
$.getJSON(url, function (data) {
control.empty();//清空下拉框
$.each(data, function (i, item) {
control.append("&option value='" + item.Value + "'&&" + item.Text + "&/option&");
这样，绑定公用字典模块的数据，也就可以通过下面进一步封装处理即可。
//绑定字典内容到指定的控件
function BindDictItem(ctrlName, dictTypeName) {
var url = '/DictData/GetDictJson?dictTypeName=' + encodeURI(dictTypeName);
BindSelect(ctrlName, url);
这样我们初始化Select2 控件，并动态绑定对应的字典值或者其他数据，则可以通过下面初始化代码即可实现。其中BindDictItem就是直接绑定字典内容的操作，BindSelect则是根据URL进行数据的获取并绑定，而$("#Province").on("change", function (e) {});这样的函数处理，就是处理选择内容变化的联动操作了。
//初始化字典信息（下拉列表）
function InitDictItem() {
//部分赋值参考
BindDictItem("Area","市场分区");
BindDictItem("Industry", "客户行业");
BindDictItem("Grade","客户级别");
BindDictItem("CustomerType", "客户类型");
BindDictItem("Source", "客户来源");
BindDictItem("CreditStatus", "信用等级");
BindDictItem("Stage","客户阶段");
BindDictItem("Status", "客户状态");
BindDictItem("Importance", "重要级别");
// 绑定省份、城市、行政区（联动处理）
BindSelect("Province", "/Province/GetAllProvinceNameDictJson");
$("#Province").on("change", function (e) {
var provinceName = $("#Province").val();
BindSelect("City", "/City/GetCitysByProvinceNameDictJson?provinceName="+ provinceName);
$("#City").on("change", function (e) {
var cityName = $("#City").val();
BindSelect("District", "/District/GetDistrictByCityNameDictJson?cityName="+ cityName);
而其中MVC控制器返回的数据，我们是返回一个JSON数据列表给前端页面的，他们的数据格式如下所示。
[ { "Text": "", "Value": "" }, { "Text": "学术会议", "Value": "学术会议" }, { "Text": "朋友介绍", "Value": "朋友介绍" }, { "Text": "广告媒体", "Value": "广告媒体" } ]
这样前端页面绑定Select2控件的时候，就使用了JSON对象的属性即可。
//绑定Ajax的内容
$.getJSON(url, function (data) {
control.empty();//清空下拉框
$.each(data, function (i, item) {
control.append("&option value='" + item.Value + "'&&" + item.Text + "&/option&");
控制器的实现代码如下：
/// &summary&
/// 根据字典类型获取对应的字典数据，方便UI控件的绑定
/// &/summary&
/// &param name="dictTypeName"&字典类型名称&/param&
/// &returns&&/returns&
public ActionResult GetDictJson(string dictTypeName)
List&CListItem& treeList = new List&CListItem&();
CListItem pNode = new CListItem("", "");
treeList.Insert(0, pNode);
Dictionary&string, string& dict = BLLFactory&DictData&.Instance.GetDictByDictType(dictTypeName);
foreach (string key in dict.Keys)
treeList.Add(new CListItem(key, dict[key]));
return ToJsonContent(treeList);
3）树形列表的绑定操作
对于属性列表，如所属公司、所属部门机构等有层次性的数据，它的绑定操作也是类似的，如下代码所示。
//绑定添加界面的公司、部门、直属经理
BindSelect("Company_ID", "/User/GetMyCompanyDictJson?userId="+@Session["UserId"]);
$("#Company_ID").on("change", function (e) {
var companyid = $("#Company_ID").val();
BindSelect("Dept_ID", "/User/GetDeptDictJson?parentId="+ companyid);
$("#Dept_ID").on("change", function (e) {
var deptid = $("#Dept_ID").val();
BindSelect("PID", "/User/GetUserDictJson?deptId="+ deptid);
只是它们返回的数据，我们把它作为有缩进的显示内容而已。
[ { "Text": "爱奇迪集团", "Value": "1" }, { "Text": " 广州分公司", "Value": "3" }, { "Text": " 上海分公司", "Value": "4" }, { "Text": " 北京分公司", "Value": "5" } ]
或者如下所示
[ { "Text": "广州分公司", "Value": "3" }, { "Text": "总经办", "Value": "6" }, { "Text": "财务部", "Value": "7" }, { "Text": "工程部", "Value": "8" }, { "Text": "产品研发部", "Value": "9" }, { "Text": "　　开发一组", "Value": "14" }, { "Text": "　　开发二组", "Value": "15" }, { "Text": "　　测试组", "Value": "16" }, { "Text": "市场部", "Value": "10" }, { "Text": "　　市场一部", "Value": "23" }, { "Text": "　　市场二部", "Value": "24" }, { "Text": "综合部", "Value": "11" }, { "Text": "生产部", "Value": "12" }, { "Text": "人力资源部", "Value": "13" } ]
综上两个部分，我们可以看到它们的Text的内容，是根据层次关系进行空格增加，从而实现了层次关系的显示。
不过从这个界面效果上讲，这样的处理确实没有EasyUI里面，对下拉列表树的展示好看，也许可以利用更好的Bootstrap插件进行这个树形内容的展示。
4）select2控件的赋值处理
上面介绍的方法，都是介绍select2控件的初始化，绑定相关的数据，那么如果初始化界面后，我们绑定编辑界面的值的时候，就需要赋值给控件，让它显示真正需要显示的项目了。
如清空控件的方法如下所示。
//清空Select2控件的值
$("#PID").select2("val", "");
$("#Company_ID").select2("val", "");
$("#Dept_ID").select2("val", "");
如果对于多个控件，需要清除，则可以使用集合进行处理
var select2Ctrl = ["Area","Industry","Grade","CustomerType","Source","CreditStatus","Stage","Status","Importance"];
$.each(select2Ctrl, function (i, item) {
var ctrl = $("#" + item);
ctrl.select2("val", "");
给Select2 控件赋值，让它显示对应值内容的项目，那么操作也就和上面的类似了。
$("#CustomerType").select2("val", info.CustomerType);
$("#Grade").select2("val", info.Grade);
$("#CreditStatus").select2("val", info.CreditStatus);
$("#Importance").select2("val", info.Importance);
$("#IsPublic").select2("val", info.IsPublic);
如果需要级联显示的，那么做法增加一个onchange的函数处理就可以了，如下级联代码的赋值处理如下。
$("#Province").select2("val", info.Province).trigger('change');//联动
$("#City").select2("val", info.City).trigger('change');//联动
$("#District").select2("val", info.District);
$("#Company_ID1").select2("val", pany_ID).trigger('change');
$("#Dept_ID1").select2("val", info.Dept_ID).trigger('change');
$("#PID1").select2("val", info.PID);
最后来两个整体性的界面效果，供参考。
以上所述是小编给大家介绍的基于BootStrap Metronic开发框架经验小结【三】下拉列表Select2插件的使用的相关内容，希望对大家有所帮助，如果大家想了解更多资讯敬请关注脚本之家网站！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具16:00 提问
select2插件：使用input标签并采用ajax请求后台数据，搜索框无效
代码如下：
$("#countyCd").select2({
placeholder: "请选择县名称",
allowClear: true,
//minimumInputLength: 2,
url: getContentPath() + "xxx",
dataType: 'json',
data: function (term, page) {
'searchCondition.cityCd': $('#cityCd').val()
results: function (data, page) {
return {results: data};
cache: true
formatResult: resultFormatResult, // omitted for brevity, see the source of this page
id: function (item) {
return item.adCd;
formatSelection: resultFormatSelection,
// omitted for brevity, see the source of this page
initSelection: function (element, callback) {
var id = $(element).val();
if (id !== "") {
$.ajax(getContentPath() + "xxx?countyCd=" + id, {
dataType: "json"
}).done(function (data) {
callback(data);
无法在返回结果中使用查询框进行筛选查询
其他相似问题温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(21561)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'Jquery Select2
blogAbstract:' \r\nJquery Select2& 控件绑定& userSelect 是个input \r\n$(\'#userSelect\').select2({\r\n& & & & & & placeholder: \"Search Users\",\r\n& & & & & & minimumInputLength: 2,\r\n& & & & & & multiple:true,\r\n& & & & & & ajax: {\r\n& & & & & & & & url: \"/user/search/\",\r\n',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:8,
publishTime:9,
permalink:'blog/static/',
commentCount:1,
mainCommentCount:1,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}