基于JQuery實(shí)現(xiàn)的Select級(jí)聯(lián)
更新時(shí)間:2014年01月27日 17:43:18 作者:
Select級(jí)聯(lián),想必大并不陌生吧,本文為大家介紹下使用jquery是如何快速實(shí)現(xiàn)的,希望對(duì)大家有所幫助
復(fù)制代碼 代碼如下:
$(document).ready(function(){
$("#precinct").change(function(){
$("#ptype").val("");//重置所有
$("#stype").html("");
$("#stype").append("<option value=\"\">--請(qǐng)選擇--</option>");
});
<span style="white-space:pre"> </span>//監(jiān)聽專利類型change事件
$("#ptype").change(function(){
var ptype = $(this);
var atype = $(this).val();//對(duì)象值
var pid = $("#precinct").val();
if (!ptype.data(atype)) {//從緩存里拿到值得話不需要再和服務(wù)器交互
$.post("Main/PatentSubsidy/getSubsidy",{askfor:atype,precinct:pid},function(json){//返回json對(duì)象
$("#stype").html("");//清空<span style="font-family: Arial, Helvetica, sans-serif;">#stype</span>下拉框
for(var i=0;i<json.length;i++){
//添加一個(gè)
$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>");
};
ptype.data(atype, json); //以#ptype的值為key加入到緩存
},'json');
}else{
var json = ptype.data(atype);//取緩存
$("#stype").html("");
for(var i=0;i<json.length;i++){
//添加一個(gè)
$("#stype").append("<option value='"+json[i].id+"'>"+json[i].value+"</option>");
};
}
});
});
根據(jù)#precinct和#ptype取得#stype
action method
復(fù)制代碼 代碼如下:
public void getSubsidy(){
String askfor=null,precinct=null;
if(null!=getPara("askfor")&&!"".equals(getPara("askfor"))){
askfor=getPara("askfor");
if(null!=getPara("precinct")&&!"".equals(getPara("precinct"))){
precinct=getPara("precinct");
}
}else{
renderJson("[{\"id\":\"\",\"value\":\"--請(qǐng)選擇--\"}]");//傳空值,返回
}
String sql = "select s.id, s.subsidy_type, p.name from org_subsidy_flow s, tab_precinct p where s.enabled = 'true' and p.status = '1' and s.patent_type = '" + askfor + "' and s.precinct = p.id";
if(null!=precinct&&!"".equals(precinct)){
sql += " and p.id = "+precinct;
}
sql += " order by p.id, s.id";
List<Org_subsidy_flow> sf = Org_subsidy_flow.dao.find(sql);
if(sf.size()!=0){
StringBuffer buffer = new StringBuffer();
for(int i=0;i<sf.size();i++){
buffer.append("{\"id\" : \""+sf.get(i).getInt("id")+"\" , \"value\" : \""+sf.get(i).getStr("subsidy_type")+" -- "+sf.get(i).getStr("name")+"\"},");
}
if(buffer.length()!=0){
renderJson("["+buffer.substring(0, buffer.length()-1).toString()+"]");
}
}else{
renderJson("[{\"id\":\"\",\"value\":\"--請(qǐng)選擇--\"}]");
}
}
您可能感興趣的文章:
- JQuery+div+css 無限級(jí)聯(lián)樹實(shí)現(xiàn)代碼
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- jquery 無限級(jí)聯(lián)菜單案例分享
- 利用了jquery的ajax實(shí)現(xiàn)二級(jí)聯(lián)互動(dòng)菜單
- JQuery異步加載無限下拉框級(jí)聯(lián)功能實(shí)現(xiàn)示例
- jQuery制作簡潔的多級(jí)聯(lián)動(dòng)Select下拉框
- jquery調(diào)取json數(shù)據(jù)實(shí)現(xiàn)省市級(jí)聯(lián)的方法
- 基于jQuery+JSON的省市二三級(jí)聯(lián)動(dòng)效果
- jquery無限級(jí)聯(lián)下拉菜單簡單實(shí)例演示
- jQuery+PHP+MySQL實(shí)現(xiàn)無限級(jí)聯(lián)下拉框效果
相關(guān)文章
AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
這篇文章主要介紹了AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以參考下2014-06-06jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例
這篇文章主要介紹了jquery實(shí)現(xiàn)帶二級(jí)菜單的導(dǎo)航示例,需要的朋友可以參考下2014-04-04jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼
這篇文章主要介紹了jQuery彈出窗口打開鏈接的實(shí)現(xiàn)代碼,需要的朋友可以參考下2016-12-12Jquery 實(shí)現(xiàn)表格顏色交替變化鼠標(biāo)移過顏色變化實(shí)例
Jquery 實(shí)現(xiàn)表格顏色交替變化,點(diǎn)擊選中行,鼠標(biāo)移過顏色變化效果附演示代碼 ,喜歡的朋友可以參考下2013-08-08jquery如何實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)
實(shí)現(xiàn)錨點(diǎn)鏈接之間的平滑滾動(dòng)的方法有很多,在接下來的文章中為大家介紹下,jquery是如何實(shí)現(xiàn)的,感興趣的朋友不要錯(cuò)過2013-12-12HTML5使用DeviceOrientation實(shí)現(xiàn)搖一搖功能
這篇文章主要介紹了HTML5使用DeviceOrientation實(shí)現(xiàn)搖一搖功能的相關(guān)資料,需要的朋友可以參考下2015-06-06jQuery彈層插件jquery.fancybox.js用法實(shí)例
這篇文章主要介紹了jQuery彈層插件jquery.fancybox.js用法,結(jié)合實(shí)例形式分析了jQuery彈出層插件jquery.fancybox.js的功能、用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01