CODEWITHSUNDEEP
jqueryselectjquery-select2
peace_love
peace_love

Reputation: 6451

How can I fire only on adding an option, not on remove (multiple select2)?

I have a function, when I change the option of my multiple select the output is "add option". The problem is, when I remove the option I don't want any output and I do not know how to achieve this:

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);


 $("#multipleSelectExample").on("change", function () {
    console.log("add option");
       });
.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

Upvotes: 1

Views: 336

Answers (2)

newman
newman

Reputation: 424

Replace change event with select2-selecting

Version 4.0 +

$('#multipleSelectExample').on("select2:selecting", function(e) { 
  console.log("add option");
});

Version Before 4.0

$('#multipleSelectExample').on("select2-selecting", function(e) { 
   console.log("add option");
});

Your version

$("#multipleSelectExample").on("select2-selecting", function () {
    console.log("add option");
});

Upvotes: 2

Anup Yadav
Anup Yadav

Reputation: 3005

Now you'll get exact values of selected options in array format. I hope this is enough you to process further. I added some dirty logic for you but that is the only option is available.

$(document).ready(
    function () {
        $("#multipleSelectExample").select2();
    }
);

selectedselect2 = []
 $("#multipleSelectExample").on("change", function (event) {
    //console.log(event);
    //console.log(event["val"]);
    //console.log($(this).val());
    //console.log(selectedselect2.length)
    
    if ($(this).val() && selectedselect2.length == 0)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length < $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("added"); 
    }
    else if ($(this).val() && selectedselect2.length > $(this).val().length)
    {
      selectedselect2 = $(this).val()
      console.log("removed"); 
    }
    else{
    selectedselect2 = []
    console.log("removed"); 
    }
    
 });
.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<link href="http://select2.github.io/select2/select2-3.5.1/select2.css" rel="stylesheet"/>


<body>
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value versus putting in configuration -->
        <select id="multipleSelectExample" data-placeholder="Select an option" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>
</body>

Upvotes: 1

Related Questions