javascript - How to remove selected value in SELECT2 - Stack Overflow

admin管理员组

文章数量:1430545

Good day everyone! I am having a trouble with my select2 jquery. I am using ajax to append value of option. And the select2 will display inside a modal. So the problem is, I want to remove the selected value. How am I going to do it? I tried many solutions here in stackoverflow but I cannot find an answer. Here's my code:

IN HTML

<a data-toggle="modal" data-target="#customer-ba">
    <i class="fa fa-users"></i>
    <span>Manage Customer</span>
</a>
<div class="modal fade" id="customer-ba" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"><i class="fa fa-object-group"></i> Customer Section</h4>
        </div>
        <form role="form" class="" method="post" action="<?php echo base_url('customer/view_customer'); ?>">
            <div class="modal-body">                    
                <div class="row">
                    <div class="form-group">
                        <label>Type of service: </label>
                        <select class="default-select2 form-control c_delivery_types" id="c_delivery_types" name="service">
                            <option></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <input type="Submit" class="btn btn-primary pull-right"></button>
            </div>
        </form>
    </div>
</div>

IN JS

$('#customer-ba').modal({ show: false});
$(function(){
    $.ajax({
         type: 'POST',
         url: base_url+'provider/select_delivery_type/',
         success: function (data) {
              var values="";
              if(data.length != 0) {
                  $.each(JSON.parse(data), function(index,item) {
                     values+="<option 
                     value='"+item.delivery_suffix+"'>"+item.delivery_name+"
                     </option>";
                  });
               }
               $(".c_delivery_types").html(values);
          }
    });
    $('.c_delivery_types').select2({
        allowClear: true,
        placeholder: {
            id: '-1', // the value of the option
            text: 'Select an option'
        },
        dropdownParent: $("#customer-ba")
    });
    $('#customer-ba select').css('width', '100%');
});

RESULT

Result problem

Good day everyone! I am having a trouble with my select2 jquery. I am using ajax to append value of option. And the select2 will display inside a modal. So the problem is, I want to remove the selected value. How am I going to do it? I tried many solutions here in stackoverflow but I cannot find an answer. Here's my code:

IN HTML

<a data-toggle="modal" data-target="#customer-ba">
    <i class="fa fa-users"></i>
    <span>Manage Customer</span>
</a>
<div class="modal fade" id="customer-ba" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title"><i class="fa fa-object-group"></i> Customer Section</h4>
        </div>
        <form role="form" class="" method="post" action="<?php echo base_url('customer/view_customer'); ?>">
            <div class="modal-body">                    
                <div class="row">
                    <div class="form-group">
                        <label>Type of service: </label>
                        <select class="default-select2 form-control c_delivery_types" id="c_delivery_types" name="service">
                            <option></option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <input type="Submit" class="btn btn-primary pull-right"></button>
            </div>
        </form>
    </div>
</div>

IN JS

$('#customer-ba').modal({ show: false});
$(function(){
    $.ajax({
         type: 'POST',
         url: base_url+'provider/select_delivery_type/',
         success: function (data) {
              var values="";
              if(data.length != 0) {
                  $.each(JSON.parse(data), function(index,item) {
                     values+="<option 
                     value='"+item.delivery_suffix+"'>"+item.delivery_name+"
                     </option>";
                  });
               }
               $(".c_delivery_types").html(values);
          }
    });
    $('.c_delivery_types').select2({
        allowClear: true,
        placeholder: {
            id: '-1', // the value of the option
            text: 'Select an option'
        },
        dropdownParent: $("#customer-ba")
    });
    $('#customer-ba select').css('width', '100%');
});

RESULT

Result problem

• javascript
• jquery
• ajax
• jquery-select2

Share Improve this question Follow edited Feb 9, 2018 at 2:59 Janine Laude asked Feb 9, 2018 at 2:46 Janine LaudeJanine Laude 4322 silver badges66 bronze badges 2

• $(".c_delivery_types").select2().select2("val", "-1"); – Mannan Bahelim Commented Feb 9, 2018 at 5:04
• Oh no, it's not working either >.< – Janine Laude Commented Feb 9, 2018 at 6:17

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Try this

$(".c_delivery_types").html(values);

After this code:

$('.c_delivery_types').append('<option selected></option>').select2({
    placeholder: "Select delivery types",
    allowClear: true
});

To remove selected value from select2 select box do like this:

$("#selectbox_id").select2('destroy').val('').select2();

本文标签： javascriptHow to remove selected value in SELECT2Stack Overflow