在项目中，需要用到下拉框，于是找到了这个比较好用的select2插件，功能很强大，几乎能满足所有的下拉选择需求,选中之后可以点击取消选择的，另，本例连同ajax获取选择的数据一并提供。

添加极限活动

$(document).ready(function(){

});

function transform(obj){

var arr = [];

for(var item in obj){

arr.push(obj[item]);

}

return arr;

}

// 提交表单

function check_form()

{

var event_id = $.trim($('#event_id').val());

// var str = $('#sel_menu2 option:selected').val();//选中的值,只能获取一个

var selectedValues = []; // 获取多选的值

$("#sel_menu2 :selected").each(function(){

selectedValues.push($(this).val());

});

if(!event_id || !selectedValues)

{

alert('活动ID或标签不能为空！');

return false;

}

// var form_data = $('#form').serialize();

// 异步提交数据到action/add_action.php页面

$.ajax(

{

url: "action/add_action.php",

data:{"event_id":event_id, "tags":selectedValues,"act":"add"},

type: "post",

beforeSend:function()

{

$("#tip").html("正在处理...");

return true;

},

success:function(data)

{

if(data > 0)

{

$("#tip").html("恭喜，添加成功！");

// document.location.href='system_notice.php'

// location.reload();

}

else

{

$("#tip").html("失败，请重试");

alert('操作失败');

}

},

error:function()

{

alert('请求出错');

},

complete:function()

{

$('#acting_tips').hide();

}

});

return false;

}

//多选

$("#sel_menu2").select2({

tags: true,

// allowClear: true,

maximumSelectionLength: 5 //最多能够选择的个数

});

###action/add_action.php接收页面

/**

* 获取提交的数据

*

*/

// 获取参数

$tags = $_POST['tags'];

$event_id = $_POST['event_id'];

// 在该页面处理之后，返回数据

echo 1;

##列表页面

###列表html页面

Demo活动列表

// 提交表单

function delete_event(event_id)

{

if(!event_id)

{

alert('Error！');

return false;

}

// var form_data = new Array();

$.ajax(

{

url: "action/event_action.php",

data:{"event_id":event_id, "act":"del"},

type: "post",

beforeSend:function()

{

$("#tip").html("正在处理...");

return true;

},

success:function(data)

{

if(data > 0)

{

alert('操作成功');

$("#tip").html("恭喜，删除成功！");

// document.location.href='world_system_notice.php'

location.reload();

}

else

{

$("#tip").html("失败，请重试");

alert('操作失败');

}

},

error:function()

{

alert('请求出错');

},

complete:function()

{

// $('#tips').hide();

}

});

return false;

}