0

How to get the current selected/unselected in a Jquery multiselect?

I already know how to get the selected values in a multiselect. The problem is that I need to get the one that was currently selected/unselected when the user clicked on it. It looks like a trivial question but I haven't really found a proper solution so far.

This is what I previously tried:

$('#mySelect').change(function(){
   var element = $(this).val();
})

Unfortunately it returns an array with all selected options. What I need is to get the current either selected or unselected value by the user. I just tried to create a method myself using auxiliar variables and it seems that it works now.

    if($(this).attr('id').includes('Type')) Key = "trackertype";

    if(selectedValue.length > 0 && $(this).val() == null){
        Value = selectedValue[0].toString();
        selectedValue = [];
        Key = '-' + Key;
    }else if(selectedValue.length == 0 && $(this).val() != null){
        selectedValue.push($(this).val()[0]);
        Value = selectedValue[0].toString();
    }else if(selectedValue.length > 0 && $(this).val() != null && selectedValue.length < $(this).val().length){
        var selected = true;
        $.each($(this).val(),function(i,item){
            var current = item.toString();
            $.each(selectedValue,function(i,itemV){
                if(current != itemV.toString()){
                    Value = current.toString();  
                    selectedValue.push(current.toString());  
                    selected = false;                                   
                }
            });
        });
    }else if(selectedValue.length > $(this).val().length){
        $.each($(this).val(),function(i,item){
            var current = item.toString();
            $.each(selectedValue,function(i,itemV){
                if(current != itemV.toString()){
                    Value = itemV.toString();  
                    selectedValue = jQuery.grep(selectedValue, function(value) {
                        return value != itemV.toString();
                    });
                    selected = true;                                   
                }
            });
        });
    }
    if(selected){
        Key = '-' + Key;
    }

I needed to send Value(value of the current selected option) and Key(select Name) to a web service. Its not the best possible code(sorry about that) but it actually does its job.

Thanks

CarlosIS
  • 43
  • 1
  • 6
  • What have you done so far? – Eddie Jul 30 '19 at 08:35
  • Possible duplicate of [How to get multiple select box values using jquery?](https://stackoverflow.com/questions/3243476/how-to-get-multiple-select-box-values-using-jquery) – Artog Jul 30 '19 at 08:38
  • Yes i have tried by using $('#selectId').val(), but this returns an array of the selected values. I do only need THE LAST ONE that was selected/unselected by the user. – CarlosIS Jul 30 '19 at 09:31
  • @CarlosIS you may want to [edit] your question and include some code with that info from comment. Have you tried adding click listener on options? – barbsan Jul 30 '19 at 11:12

1 Answers1

1
var selectedItems =  document.querySelectorAll('#selectBoxid option:checked');
// here selectboxid is id of select element of your page.

It is simple when any html element can get using document.getElementsById('id').

Just same as if you want to get html element using css class or any css selector rather than id of element or name of html element.

For example : 

<p class="text-center" > abcd </p>

Then, we can retrive all html using:

document.querySelectorAll('.text-center')

Same in given example we want option html element which is selected for that property I use:

document.querySelectorAll('option:checked');
FZs
  • 16,581
  • 13
  • 41
  • 50
Naresh Vadhavana
  • 66
  • 7
  • it is simple when any html element can get using document.getElementsById('id'). – Naresh Vadhavana Jul 30 '19 at 12:37
  • I've meant to explain it in your answer... You can edit it anytime! – FZs Jul 30 '19 at 12:37
  • it is simple when any html element can get using "document.getElementsById('id')". just same as if you want to get html element using css class or any css selector rather than id of element or name of html element. example :

    abcd

    than we can retrive all html using "queryselectorAll('.text-center')". same in given example we want option html element which is selected for that property i use "document.querySelectorAll('option:checked');     – Naresh Vadhavana Jul 30 '19 at 12:44
  • Write this in your answer... Click *edit*, and you can edit it. Don't write the details in comments, not everybody reads them... – FZs Jul 30 '19 at 12:47
  • Your edit [**was** performed](https://stackoverflow.com/posts/57267802/revisions). I've edited it again, making it even better. Thank you for your time, this way you can help to more people, and your answer will probably get more upvotes. – FZs Jul 30 '19 at 12:59