在項目中，需要用到下拉框，于是找到了這個比較好用的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;

}

活動ID

活動標簽

用戶管理

角色管理

部門管理

菜單管理

添加

//多選

$("#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;

}

id活動ID標簽編輯ID添加時間操作

1123456ios,php,Laravel156987622016-06-01 18:14:12刪除

總結

以上是生活随笔為你收集整理的select2 ajax demo,Select2下拉框示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。