【问题标题】：create reset value button on select2在 select2 上创建重置值按钮
【发布时间】：2016-07-07 03:19:56
【问题描述】：

我正在使用 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/

【问题讨论】：

只是更新描述，请看jsfiddle

标签： javascript jquery select2

【解决方案1】：

你需要触发change

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

我更新了你的小提琴：https://jsfiddle.net/acvxeq8x/3/

【讨论】：

【解决方案2】：

这是您的code 的简化和最小版本，非常简单。下面的代码似乎很长，因为在其中添加了 cmets 以进行解释。希望你理解后可以忽略它们。

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`

【讨论】：