开发背景:一个页面有一个下拉框和一个单选按钮,下拉框保存的是厂商信息,单选按钮保存的是产品信息。每次下拉框的内容被选中,把厂商编码保存到隐藏域
<input type="hidden" id="basin_code" name="basin_code" value=""/>
然后点击该河流下的产品,把产品编码保存到隐藏域
<input type="hidden" id="code_pollute" name="code_pollute" value=""/>
然后ajax提交到后台根据这两个参数查询数据。
下拉框代码
<ul>
<li><a id="dynastytitle" onclick="hiddenValue('pg');" class="dropdown">苹果</a></li>
<li class="sublinks">
<a onclick="hiddenValue('hw');">华为</a>
<a onclick="hiddenValue('xm');">小米</a>
<a onclick="hiddenValue('sx');">三星</a>
</li>
</ul>
单选按钮代码
<ul id="navigation_ul">
<li><a onclick="hiddenValue('N01');">电脑</a></li>
<li><a onclick="hiddenValue('P02');">手机</a></li>
<li id="stander" class="active"><a onclick="hiddenValue('C03');">平板</a></li>
</ul>
每次点击传一个参数到hiddenValue()函数,hiddenValue把编码保存到隐藏域
function hiddenValue(param){
if(param==undefined||param=='udefined'){
//alert(1);
$("#code_pollute").val('C03');
$("#basin_code").val('pg');
}
if(param=='N01'||param=='P02'||param=='C03'){
//alert(2);
$("#code_pollute").val(param);
}
if(param=='pg'||param=='hw'||param=='xm'||param=='sx'){
//alert(3);
$("#basin_code").val(param);
$("#code_pollute").val("C03");
}
debugger;
changebasin(); --隐藏域值改变调用ajax方法请求后台
}
ajax每次请求后台会先从隐藏域取厂商和产品的参数值传到后台
function changebasin(){
var rivername = $("#basin_code").val();
var codepollute = $("#code_pollute").val();
//alert(rivername);
$.ajax({
type: "POST",
url: "../factory/factory_product.vm",
dataType: "json",
data:JSON.stringify({"watername":rivername,"code_pollute":codepollute}),
contentType: "application/json; charset=utf-8",
success: function(result){
loadEcharts(result);
$("#monitortime").html(result.monitortime);
}
});
}
每次隐藏域的值改变后会调用请求后台的函数changebasin()
$(function(){
changebasin();
hiddenValue();
})
每次页面初始化会先调用两个函数,给隐藏域赋值,调用后台方法