CODEWITHSUNDEEP
javascript
user3651247
user3651247

Reputation: 248

Javascript - How to record the selection value as an array from multi selection dropdown list (including add and delete)

As we know, the select2 widget can be used to build a multi selection dropdown list for adding items and deleting items. How can we use a list to record the option value for adding and deleting? for example 

$('#example').select2({
    placeholder: 'Select a month'
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<select id="example" multiple="multiple" style="width: 300px">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
</html>

For instance, if I select January and February, the array result[] should append 1 and 2 to the list. If remove January, the result list should remove value 1 as well and remind result[2].

Upvotes: 0

Views: 307

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

You can listen for the select's change event, and retrieve an array of the selected values with $("#example").val()

$('#example').select2({
    placeholder: 'Select a month'
});

$("#example").on("change", function() {
    var result = $(this).val().map(i => parseInt(i));
    console.log(result);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<select id="example" multiple="multiple" style="width: 300px">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
</html>

Or, if you wanted them as text, you could .map the selected elements:

$('#example').select2({
    placeholder: 'Select a month'
});

$("#example").on("change", function() {
    var result = $(this).find("option:selected").map(function() { return $(this).text() }).get();
    console.log(result);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<select id="example" multiple="multiple" style="width: 300px">
    <option value="1">January</option>
    <option value="2">February</option>
    <option value="3">March</option>
    <option value="4">April</option>
    <option value="5">May</option>
    <option value="6">June</option>
    <option value="7">July</option>
    <option value="8">August</option>
    <option value="9">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
</select>
</html>

Upvotes: 1

Related Questions