4

I have a multiselect dropdown where I want to get the value of latest selected value. In my example, I've just used an alert to display the selected option. When I select 'volvo' it alerts volvo and now if I press ctrl and multiselect 'opel', I still get alerted 'volvo'. But I want it to alert 'opel'. I tried using an array to store the values but I'm not able to use the second option in the dropdown.

My actual code is about inserting these values dynamically to a new row in a table. But 'volvo' gets added evrytime instead of other selected options

Here's the code:

<!DOCTYPE html>
<html>

<body>

  <form action="/action_page.php">
    <select name="cars" onchange="myFucntion(this.value)" multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

  <script type="text/javascript">
    function myFucntion(val) {
      alert(val);
    }
  </script>
</body>

</html>

EDIT: There seems to be a problem with only selectpicker multiselect dropdown. It works fine when I remove selectpicker class. Is there anyway to solve it when using selectpicker?

coder1456
  • 181
  • 3
  • 11
  • Check my answer, it really implement the latest selection tracking. For all other answers you will see that when you deselects a option you get that value as latest selection. Mine is not like that. You can understand well when you run it. – Ankit Agarwal Jul 03 '17 at 10:16

5 Answers5

2

You need to put a click handler on the options. Then just test whether the option is selected or not (so you don't alert when you're de-selecting the option).

<!DOCTYPE html>
<html>

<body>

  <form action="/action_page.php">
    <select name="cars"  multiple>
    <option value="volvo" onclick="myFunction(this)">Volvo</option>
    <option value="bmw" onclick="myFunction(this)">Bmw</option>
    <option value="opel" onclick="myFunction(this)">Opel</option>
    <option value="audi" onclick="myFunction(this)">Audi</option>
    </select>
    <input type="submit">
  </form>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

<script type="text/javascript">
function myFunction(option) {
    if (option.selected) {
        alert(option.text);
    }
}
</script>
</body>

</html>
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • In my actual code, I'm using selectpicker multiselect dropdown and when I use 'onclick' on a particular option, it doesn't call the function. But when I use 'onclick' inside 'select' tag, it calls the function. Is the problem because of selectpicker? – coder1456 Jul 03 '17 at 10:47
  • Binding listener to every `option` element strictly inside DOM? Barmar :( – kind user Jul 03 '17 at 12:55
  • @coder1456 If you're using a plugin, you need to check its documentation to see if it has an event you can bind. – Barmar Jul 03 '17 at 15:03
1

This gets the last selected item in your option list.

<!DOCTYPE html>
<html>

<body>

  <form action="/action_page.php">
    <select name="cars" onchange="myFucntion(this.value)" multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>

  <script type="text/javascript">
    var lastSelected = null;
    function myFucntion(val) {
      alert(lastSelected === null ? 'There was no last selected item' : lastSelected);
      lastSelected = val;
    }
  </script>
</body>

</html>

I suspect this is not what you want. You would likely want all the selected items in the list:

//Function courtesy of https://stackoverflow.com/a/27781069/4875631
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}

function myFunction(select) {
    var values = getSelectValues(select);
    console.log(values);
}
<!DOCTYPE html>
<html>

<body>

  <form action="/action_page.php">
    <select name="cars" onchange="myFunction(this)" multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body>

</html>
Blue
  • 22,608
  • 7
  • 62
  • 92
1

Changing the event to click and using the target.value should do the trick.

const elem = document.getElementById('elem');
      elem.addEventListener('click', (e) => console.log(e.target.value));
<form action="/action_page.php">
  <select name="cars" id='elem' multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <input type="submit">
</form>

<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
kind user
  • 40,029
  • 7
  • 67
  • 77
0

I think we have to keep proper track of recent selection of the select values. Let's say user selects

A -> B-> C-> D

Then recent selection is D so we print D. Now what if user deselect option D. AT this case the proper recent tracking would work if you are able to print C, as C is recently selected before D. And so on when C is deselect. All of the answers above do not consider this. So i have my version of answer and logic here.

$(document).ready(function(){

var selectedValues = [];
$('#carsDdl').on('click',function(event){
  var recentSelection = event.target.value;
  var index = selectedValues.indexOf(recentSelection);
  if(index === -1){
     selectedValues.push(recentSelection);
  }else{
     selectedValues.splice(index,1);
  }
  if(selectedValues.length !== 0){
     var recentSelection = selectedValues[selectedValues.length-1];
     console.log('All selected cars: '+ selectedValues);
     console.log('Recently selected car: '+ recentSelection);
  }
 
})

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <form action="/action_page.php">
    <select id = 'carsDdl' name="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>
Ankit Agarwal
  • 30,378
  • 5
  • 37
  • 62
0

I added ability to find out appending and removing item from multiselect

var old_selected = [];
function getSelectValues(select) {
  var result = [];
  var options = select && select.options;
  var opt;

  for (var i=0, iLen=options.length; i<iLen; i++) {
    opt = options[i];

    if (opt.selected) {
      result.push(opt.value || opt.text);
    }
  }
  return result;
}
function myFucntion(el){
 new_selected = getSelectValues(el);
  //find added elemnts
  added = new_selected.filter(function(item){
   return old_selected.indexOf(item)==-1
  });
  if(added.length>0)
   alert(added+' added')
  //find removed 
  removed = old_selected.filter(function(item){
   return new_selected.indexOf(item)==-1
  });
  if(removed.length>0)
   alert(removed+' removed')
 
  old_selected = new_selected;
  
}
  

<form action="/action_page.php">
    <select name="cars" onchange="myFucntion(this)" multiple>
    <option value="volvo">Volvo</option>
    <option value="bmw">Bmw</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
    </select>
    <input type="submit">
  </form>

  <p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
Ebrahim Poursadeqi
  • 1,776
  • 2
  • 17
  • 27