grails通过Ajax实现Select的标签的无刷新级联

功能描述:
在grails通过选择select不同的option,通过Ajax查询数据库中的值,返回Json类型的结果,实现页面标签的无刷新级联。
1.页面代码,在id为selectQuyu不同的选择返回不同的值到id为selectChangjia的select中。
<select id="selectQuyu"  onchange ="setChanjia(this.options[this.selectedIndex].value)">
<option value="-1" selected="true">全部集团</option>
<option value="1">红塔集团</option>
<option value="2">红烟集团</option>
<option value="3">红云集团</option>
<option value="5">其它</option>
</select>    

<select id ="selectChangjia">
<option selected="true">全部厂家</option>
</select>    

2.js进行处理,导入prototype类库,发送Ajax异步请求,获得返回的json类型的值,然后加入到id为selectChangjia的select中。
<g:javascript library="prototype" />
<script language="JavaScript" type="text/javascript">
function setChanjia(jituan){
var baseUrl = "${createLink(controller:'csfx', action:'getJson')}"
var url = baseUrl + "?combineid=" +(jituan)
alert(url)
new Ajax.Request(url, {
method: 'get',
asynchronous: true,
onSuccess:function(req) {update(req.responseText, 'changjiaMess')}
})
}

function update(json, mess){
var cjxx = eval( "(" + json + ")" )
//删除所有的值
document.getElementById("selectChangjia").options.length=0;
document.getElementById("selectChangjia").options.add(new Option('全部厂家','-1'));
for(var i = 0;i<cjxx.length;i++){
var changJiaText = cjxx[i].CHANGJIA;
var changJiaValue = cjxx[i].CHANGJIAID;
document.getElementById("selectChangjia").options.add(new Option(changJiaText,changJiaValue));
}
}
</script>

3.controllor中的处理,通过传入的id好进入数据库进行查询,然后返回json结果。
def getJson ={
//处理已经遗留的数据库
Sql sql = new Sql(dataSource)
def com_id = params.combineid
def changjiaStr = " select distinct(t.produce_factory) as changjia,t.factory_id as changjiaid from dim_tel_sale_cigarette t "
if(com_id!=null&&com_id!="-1"){
changjiaStr =changjiaStr+"where t.combine_id = "+com_id
}
println changjiaStr
def changJiaArr = sql.rows(changjiaStr)
//处理乱码问题
changJiaArr.each{
it.CHANGJIA = new String((it.changjia).getBytes("ISO-8859-1"),"gb2312")
}

render changJiaArr as JSON
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值