使用select2創建select2上的復位值按鈕

Question

im使用select2並嘗試爲每個選擇創建一個復位按鈕。我有6選擇。

我的劇本是像這種情況下，該

$('.deggre').on('change', function() { 
    var deggre = $(this).val(); 
    var span = $("#dropdownMenu1").find('span').clone(); // Copy 'X' span. 
    $("#dropdownMenu1").text(deggre); // Insert text first. 
    $("#dropdownMenu1").append(span); // Then, append the 'X' span. 
    if($(this).val() == "") 
    $('#dropdownMenu1').css({"display": "none"});//value is none then hide 
    else 
    $('#dropdownMenu1').css({"display": "inline-block"});//have value then show 
}); 
$("#dropdownMenu1").click(function(){ 
    $(".deggre").val(""); 
}); 

我的劇本沒有工作。如何解決這個問題呢？ 我需要在select2選擇選項時顯示按鈕，並將innerHtml指定給按鈕。然後當按鈕點擊時，它將重置他自己的選擇，然後按鈕消失，因爲它沒有得到該值。

我的繼承人的jsfiddle https://jsfiddle.net/acvxeq8x/2/

Answer 1

您需要觸發change

$("#dropdownMenu2").click(function(){ 
    $(".position").val("").trigger('change'); 
}); 

我已經更新您的提琴：https://jsfiddle.net/acvxeq8x/3/

Answer 2

這裏是你code的簡化和最小的版本，這是相當直截了當。下面的代碼似乎很長，因爲解釋中添加了註釋。希望你理解後會忽略他們。

HTML變化

<div class="wrap"> 
    <!--Remove everything within wrap div and keep one copy of button in js to dynamically 
    construct the button tag--> 
</div> 

新建CSS添加

button.btnspl{ 
    margin:10px; 
    /*Bit styling for dynamically created buttons*/ 
} 

JS變化

//Bind single change event to all your select element 
$('.deggre,.position,.year').on('change', function() { 
    var ctrl=$(this); //reference for current element 

    var ctrlClass=ctrl[0].classList[0]; //get the first class which will be the class given 
    //to your original select element like deggre, position, year etc., 

    $('button.btnspl[data-control="'+ctrlClass+'"]').remove(); 
    //Since your select element is single select type, I hope you want to keep only one tag 
    //for each select. So, you remove other tags with above line 

    if(ctrl.val() == "")return; //return if value is empty, you aren't creating anything 

    var btn=$('<button class="btn btn-grey btnspl" type="button"><span class="glyphicon glyphicon-remove"></span></button>'); 
    //Button copy from your wrap div 

    var option = $('<span>'+ctrl.val()+'</span>'); 
    //get the selected option and place it in span 

    var span = $(deggre).insertBefore(btn.find('span')); 
    //insert the above created span before the glyphicon-remove in button 

    btn.attr('data-control',ctrlClass); 
    //the created button should have information about the control which created it 
    //so wrapping the ctrlClass [deggre, year, position] into data-* attribute of created button 
    //this will be used to remove particular button and clear its respective select, 
    //on different scenarios 

    $('.wrap').append(btn); 
    //append the button to .wrap div  
}); 


//attaching close click event to glyphicon-remove. 
//Read about event-delegation for dynamically created elements 
//button is dynamically created here 
$('.wrap').on('click','.glyphicon-remove',function(){ 
    var ctrl=$(this).closest('.btn'); 
    //get the parent of the clicked remove icon using closest 

    var ctrlClass=ctrl.attr('data-control'); 
    //get its data-control attribute added during creation 

    $('.'+ctrlClass).val("").trigger('change'); 
    //empty its value and trigger change 

    ctrl.remove(); 
    //remove the control 
}) 

JSFiddle DEMO