ドロップダウン・ボックス、ドロップダウン・コントロールSelect 2の使用

  
    
    
	
	
	
  
  
	 
		   
		  
		  
		  
		    
		   
		  
		   
	
	     
	     
	     
	   
	     
	   
	   
	    

$(function(){
	initSelect2();
	
	$("#getBtn").on('click', function(){
		alert($("#select2_id").val());
	});
	$("#addBtn").on('click', function(){
		$("#select2_id").append($("<option>", {value: 'value1', text: 'text1'}));
	});
	$("#destoryBtn").on('click', function(){
		$("#select2_id").select2("destroy");
	});
	$("#emptyBtn").on('click', function(){
		$("#select2_id").empty();
	});
	$("#initBtn").on('click', function(){
		initSelect2();
	});
	$("#setBtn1").on('click', function(){
		//    -   
		$("#select2_id").val('xiaoying').trigger("change");
	});
	$("#setBtn2").on('click', function(){
		//    -   
		$("#select2_id").val(['kakaxi','gangshou']).trigger("change");
	});
	$("#setBtn3").on('click', function(){
		$("#select2_id")
		.val($("#select2_id option")
				.map(function(){
				return $(this).val();
				}).get()
		).trigger("change");
	});
	
});

function initSelect2() {
	$('#select2_id').select2({
		//placeholder: "   ",
		placeholder: {id: '', text: "   "}, //   ，        ''
		tags:true,
		createTag:function (decorated, params) {
			return null;
		},
		width:'400px',
		closeOnSelect: true,
		allowClear: true,
		language: "zh-CN"
		//tokenSeparators: [',', ' ']
	});
}

$('select[name="level1"]').on("change",function(e){ console.log("    ")});
$('select[name="level1"]').on("select2:open",function(e){ console.log("    ")});
$('select[name="level1"]').on("select2:close",function(e){ console.log("    ")});
$('select[name="level1"]').on("select2:select",function(e){ console.log("    ")});
$('select[name="level1"]').on("select2:unselect",function(e){ console.log("    ")});