CODEWITHSUNDEEP
javascriptjqueryjquery-select2
TheFallenOne
TheFallenOne

Reputation: 1686

Unable to set Select2 dropdown value using JQuery

I have two drop downs,the first one is a multi-select drop down and the second one gets values from the first drop down selection. That portion is working fine. However I have an issue, every time a new selection is included in the first drop down, the selected value of second drop down gets wiped out and it defaults to the first value. I need it to retain the previous value.

For ex ; In the first drop down, say I select California, New Jersey and Washington, the second drop down has those three values. I then choose Washington in the second drop down. So far it works as needed. However if I add say Florida from the first drop down, my code ensures that Florida is added to second drop down but the earlier selection of Washington is wiped out and instead it goes back to California. I would want it to stay with Washington after the new element has been added. What am I doing wrong in my code here? 

$(document).ready(function() {
    $('#allstates').select2();
    $('#mainstate').select2();
});


$(document).on('select2:select', '#allstates', function (event) {
    var values = [];
    var displayText = [];
    // copy all option values from selected
    $(event.currentTarget).find("option:selected").each(function (i, selected) {
        displayText[i] = $(selected).text();
        values[i] = $(selected).val();
    });

    if (values.length > 0) {             

        var mainstate = $('#' + 'mainstate');
        var currentvalue = mainstate.val();
        mainstate.empty();
        
        for (var i = 0; i < values.length; i++) {
            mainstate.append($('<option>', { value: values[i], text: displayText[i] }, '<option/>'));
        }

        mainstate.select2();
        
        if (currentvalue != null && currentvalue != "" && currentvalue != undefined) {
            if (_.contains(values, currentvalue.toUpperCase())) {
                mainstate.select2("data", { id: currentvalue, text: displayText[currentvalue] });
            }
        }        
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

<select class="js-example-basic-single" id="allstates" name="state" multiple>
  <option value="AL">Alabama</option>
  <option value="CA">California</option>
  <option value="FL">Florida</option>  
  <option value="NJ">New Jersey</option>
  <option value="TX">Texas</option>
  <option value="WA">Washington</option>
  <option value="WY">Wyoming</option>
</select>

<select class="main-state" id="mainstate"  name="mainstate">
</select>

Upvotes: 0

Views: 995

Answers (1)

Vladan
Vladan

Reputation: 1632

For Select V4 you need to trigger it manually like this

$('#mainstate').val(currentvalue).trigger('change');


    $(document).ready(function() {
        $('#allstates').select2();
        $('#mainstate').select2();
    });


    $(document).on('select2:select', '#allstates', function (event) {
        var values = [];
        var displayText = [];
        // copy all option values from selected
        $(event.currentTarget).find("option:selected").each(function (i, selected) {
            displayText[i] = $(selected).text();
            values[i] = $(selected).val();
        });

        if (values.length > 0) {             

            var mainstate = $('#' + 'mainstate');
            var currentvalue = mainstate.val();
            mainstate.empty();
            
            for (var i = 0; i < values.length; i++) {
                mainstate.append($('<option>', { value: values[i], text: displayText[i] }, '<option/>'));
            }

            mainstate.select2();
            
            if (currentvalue != null && currentvalue != "" && currentvalue != undefined) {
                if (_.contains(values, currentvalue.toUpperCase())) {
                    $('#mainstate').val(currentvalue).trigger('change');
                }
            }        
        }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.js"></script>

    <select class="js-example-basic-single" id="allstates" name="state" multiple>
      <option value="AL">Alabama</option>
      <option value="CA">California</option>
      <option value="FL">Florida</option>  
      <option value="NJ">New Jersey</option>
      <option value="TX">Texas</option>
      <option value="WA">Washington</option>
      <option value="WY">Wyoming</option>
    </select>

    <select class="main-state" id="mainstate"  name="mainstate">
    </select>

Upvotes: 2

Related Questions