CODEWITHSUNDEEP
javascriptjqueryjquery-select2
renat natanael
renat natanael

Reputation: 137

create reset value button on select2

im using select2 and try to create a reset button for each select. i have 6 select.

my script is like this

$('.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("");
});

my script didnt work for this case. how to solve this problem? i need to show the button when we choose option on select2, and give innerHtml to the button. and then when the button click, its will reset his own select then the button is gone cause it didnt get the value.

heres my jsfiddle https://jsfiddle.net/acvxeq8x/2/

Upvotes: 0

Views: 1736

Answers (2)

Guruprasad J Rao
Guruprasad J Rao

Reputation: 29683

Here is the simplified and minimal version of your code which is pretty straight forward. The code below seems long because of comments added within for explanation. Hope you will ignore them once you understand.

HTML Changes

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

New CSS added

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

JS Changes

//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

Upvotes: 0

currarpickt
currarpickt

Reputation: 2302

You need to trigger the change

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

I have updated your fiddle: https://jsfiddle.net/acvxeq8x/3/

Upvotes: 1

Related Questions