Checkbox类：
1.实现checkbox的全选功能
<script type="text/javascript">
//全选checkbox：1、当全选checkbox勾选，子checkbox(name为'ids'的checkbox)自动全部勾选
// 2、当全选checkbox取消勾选，子checkbox自动全部取消勾选
function checkAll(){
if($("#checkall")[0].checked){
$("input[type='checkbox'][name='ids']").attr("checked","checked");
}else{
$("input[type='checkbox'][name='ids']").attr("checked",null);
}
}
//子checkbox：1、当所有子checkbox全部勾选时，全选checkbox自动勾选
//2、当有一个子checkbox没有勾选时，全选checkbox自动改为未勾选
function changeCheckCount(){
var count=0;
$("input[type='checkbox'][name='ids']").each(function(index,data){
if(this.checked){
count++;
}
});
if(count== $("input[type='checkbox'][name='ids']").length){
$("#checkall").attr("checked","checked");
}else{
$("#checkall").attr("checked",null);
}
}
</script>
<td><!-- 全选checkbox --> <s:checkbox name="checkall" id="checkall" value="" cssClass="checkbox" onclick="checkAll()"/> </td> <td><!-- 子checkbox --> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" onclick="changeCheckCount()"/> </td>
2.获取checkbox被选中的个数，并将checkbox的值组织成字符串
<script type="text/javascript">
//1、获取checkbox选中的个数：count
//2、将选中的checkbox的值(此例子为id)组织成"id,id,id,..."类型的字符串,方便action获取：ids
function checkbox(){
var count=0;
var ids="";
$("input[type='checkbox'][name='ids']").each(function(index,data){
if(this.checked){
count++;
if(count==1){
ids=$(this).val();
}else{
ids=ids+","+$(this).val();
}
}
});
}
</script>
<td> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" /> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> <s:checkbox name="ids" fieldValue="" cssClass="checkbox" "/> </td>
Select类
1.jQuery实现下拉列表的联动，实现省份和城市的关联
<script type="text/javascript">
//实现省份和城市的二级联动
/*
jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求,[]为可选属性,此例子选了[data],[callback]
参数：
url (String) : 发送请求的URL地址.
data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。
callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。
type (String) : (可选)官方的说明是：Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)
*/
function showCity(value){
//通过action里的showCity函数实现通过省份名字获取对应省份下的城市列表,并返回相应的数据
//{name:value}：value为省份下拉列表传过来的省份名字
$.post("${pageContext.request.contextPath}/company_showCity.action",{name:value} ,function(data,textStatuts){
//alert(data);
var dataObj=eval("("+data+")");
//alert(dataObj);
//先删除之前一次加载的城市
$("select[name='city'] option[value!='']").remove();
//将城市封装成option后加到select里,格式如下
// <select name="city" style="width:90%">
//<option value="">--------</option>
//</select>
for(var i=0;i<dataObj.length;i++){
var $option=$("<option></option>");
$option.attr("value",dataObj[i].name);
$option.text(dataObj[i].name);
$("select[name='city']").append($option);
}
});
}
</script>
<tr>
<td>省份：</td>
<td>
<s:select list="#provinceList" name="province" id="province"
listKey="name" listValue="name"
headerKey="" headerValue="--------"
cssStyle="width:90%" onchange="showCity(this.value)">
</s:select>
</td>
<td>城市：</td>
<td>
<s:select list="{}" name="city" id="city"
headerKey="" headerValue="--------" cssStyle="width:90%" >
</s:select>
</td>
</tr>
company.action中的showCity函数
/** 通过省份显示对应城市
* @throws IOException **/
public String showCity() throws IOException{
//拿到jsp中省份的名字
String name=request.getParameter("name");
if(StringUtils.isNotBlank(name)){
//通过省份名字拿到对应省份实体(下面查询城市时,用来拿省份id)
Province province=provinceService.findProvinceByName(name);
//通过省份id查询该省份下的所有城市
List<City> cityList=cityService.findCityByPid(province.getId());
//New一个JsonConfig
JsonConfig config=new JsonConfig();
//设置不要获取的属性列,只取city表里的name属性,根据自己定义的city表进行定义,
config.setExcludes(new String[]{"id","pycode","pid","postcode","areacode"});
//将List转换为jsonArray
JSONArray jsonArray=JSONArray.fromObject(cityList,config);
response.setCharacterEncoding("utf-8");
//将jsonArray转成字符串后发送给jsp页面
response.getWriter().print(jsonArray.toString());
}
return null;
}