CODEWITHSUNDEEP
javascriptphphtml
oDev
oDev

Reputation: 23

Pushing data values of a multiple select Only pushes the first clicked option multiple times

I came accross a problem while using Javascript . I have a multiple select who I want to get all the data-type selected then push it to an array . But I got stuck in the first step of getting the data selected. It only Gets the first option selected then when i click on the other one it pushes again the same first value.

Here is my code :

<select  multiple  id="boox" name="box[]" class="selectpicker form-control" data-live-search="true"  data-size="4"  required> 
    <option value="1" data-type="11">item 1 </option>
    <option value="2" data-type="22">item 2 </option>
    <option value="3" data-type="33">item 3 </option>
    <option value="4" data-type="44">item 4 </option>
</select>

My Javascript Code : 

var options = [];
$('#box').change(function() {
    options.push($('#box').find("option:selected").data("type"));
    console.log(options);
});

For example if I select item 2 it returns in the console :

22

Then If I click on item 3 , it returns :

22,22

I Hope someone could clarify what I am doing wrong.I will appreciate it !

Upvotes: 2

Views: 152

Answers (2)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Do it like this. Use change event and then access value.

var optVal = [];
var tempVal = [];

$(".box").change(function() {
  
  $(".box option").each(function() {
    var val = $(this).val();
  var tempVal = $(".box").val();
  
  if(tempVal.indexOf(val) >= 0 && optVal.indexOf(val) < 0) {
    optVal.push(val);
    console.log("Opt: " + optVal);
  } else if(tempVal.indexOf(val) < 0 && optVal.indexOf(val) >= 0) {
    optVal.splice(optVal.indexOf(val) , 1);
    console.log("Opt: " + optVal);
  }
  
  })
  
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<select  multiple  class="box" name="box[]" class="selectpicker form-control" data-live-search="true"  data-size="4"  required> 
<option value="1" data-type="11">item 1 </option>
<option value="2" data-type="22">item 2 </option>
<option value="3" data-type="33">item 3 </option>
<option value="4" data-type="44">item 4 </option>
</select>

Upvotes: 1

R.K.Saini
R.K.Saini

Reputation: 2708

Basically you need to loop through all the selected options and push the value to your options array. In below code I use jQuery each() function to loop through all the selected options and store their value in options array:

var options =[];
 $('#box').change(function(){
  options =[];
  $('#box').find("option:selected").each(function(){
    options.push($(this).data("type"));
  })
  console.log(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select  multiple  id="box" name="box[]" class="selectpicker form-control" data-live-search="true"  data-size="4"  required> 
<option value="1" data-type="11">item 1 </option>
<option value="2" data-type="22">item 2 </option>
<option value="3" data-type="33">item 3 </option>
<option value="4" data-type="44">item 4 </option>
</select>

Upvotes: 1

Related Questions