创建一个按钮以删除select2上的所选值

Question

I want to ask about select2. I have 2 select2, when client choose the list. after the client choose the list, the button show up with name of the value choose and the value go to button instead on input area select2 so the the select2 will stay with the placeholder.

<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1">
    <!-- the name of button is the value of what we choose in first select2  /example Alabama-->
    <span class="glyphicon glyphicon-remove"></span>
 </button>

the button have function to allowClear: true like. how to be like that i put it on jsfiddle https://jsfiddle.net/mujkz5v3/1/

thank you so much, please help

Answer 1

Use $("#dropdownMenu1").html( deggre );

or $("#dropdownMenu1").text( deggre );

instead of .val

Answer 2

See the following changes:

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