在做网站的时候,经常有这样的功能:多选条件然后传给后台查询数据库,把值返回到前台。这类功能,我主要的解决思路是通过 js 获取点击的内容,放到 隐藏的input 框,然后拼成url 代参 传给后台。
js部分的主要问题是点击之后选中和再次点击消失,同时隐藏的input的也相应的增加或者删除。
$(".city").click(function(){
$(this).addClass('c_neirong_on'); //点击后添加样式
var v = $(this).attr('value'); //获取当前元素的值
var a = $("#checked_city").val(); //获取隐藏input 框的内容
var a_arra= a.split(","); //字符串转数组
//console.log(a_arra);
var allv ;
var b = $.inArray(v , a_arra ); //判断当前的值在数组中是否存在, $.inArray()返回的是找到的元素在数组的索引值
console.log(b);
if( b>=0 ){ //已经,存在删除
a_arra.splice(b,1); // 数组中删除这个值
console.log(a_arra);
allv = a_arra.join(","); //数组转字符串
$(this).removeClass('c_neirong_on');
} else{
if(a){
allv = a+","+v; //input 框有字符 拼接字符串
} else {
allv= v; //input框没有字符
}
}
$("#checked_city").attr('value', allv );
});