在 select2 上创建重置值按钮

Question

我正在使用 select2 并尝试为每个 select 创建一个重置按钮。我有 6 select.

我的脚本是这样的

$('.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 提供给按钮。然后当按钮点击时，它会重置他自己的 select 然后按钮消失了，因为它没有得到值。

这是我的 jsfiddle https://jsfiddle.net/acvxeq8x/2/

Answer 1

您需要触发 change

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

我已经更新了你的fiddle：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
})

在 select2 上创建重置值按钮

create reset value button on select2

javascript

jquery

select2

`JSFiddle DEMO`