HTML Select unable to get selected value data in javascript

Question

Basically, my current code is to hide options from the dropdown of selected items. The below code is working when the user selects the option it will hide the selected value in all the dropdowns. But I facing one issue which is when I want to get all the selected value from the dropbox box it will return a null value when the save button trigger. Anyone can help with this, I stuck in this issue long time :((?

Source Code: https://jsfiddle.net/8forcbg3/4/

$( ".firstname").on('change',function() {

            
 $(".firstname option").prop("disabled", false); //enable everything

            //collect the values from selected;
            var arr = $.map(
                        $(".firstname option:selected"), function (n) {
                            return n.value;
                        }
                    );

            //disable elements
            $(".firstname option").filter(function () {
                return $.inArray($(this).val(), arr) > -1; //if value is in the array of selected values
            }).prop("disabled", true);

            //re-enable elements
            $(".firstname option").filter(function () {
                return $.inArray($(this).val(), arr) == -1; //if value is not in the array of selected values
            }).prop("disabled",false);

            $(this).prop('disabled',false);//re-enable the current one //1
            $(this).show();//and show it //1
            $(this).prop('selected',true);//just to be sure re-select the option afterwards //1
           
        });
        
        
         $('.savebtn').on('click', function(){
         $('.cbb').each(function(index, item){
            var selectVal  = $(this).find('select').val();
                       
                        console.log(selectVal);
                        
                         });
         });

Does this answer your question? [Get selected value of a dropdown's item using jQuery](https://stackoverflow.com/questions/2780566/get-selected-value-of-a-dropdowns-item-using-jquery) — Semih Arslanoglu, Feb 20 '21 at 09:40

score 3 · Answer 1 · edited Feb 20 '21 at 12:00

3

Here's Get selected value of a dropdown's item using jQuery
Get Selected value by like this,

 var selectVal  = $(this).find('select :selected').text();

edited Feb 20 '21 at 12:00

zahra zamani

1,323
10
27

answered Feb 20 '21 at 07:59

Tamil Prakash

106
3

score 1 · Accepted Answer · answered Feb 20 '21 at 08:00

The resolution for your question is this:

$('.savebtn').on('click', function(){
    $('.cbb').find('select option:selected').each(function(index, item){
        var selectVal = $(this).val();
        console.log(selectVal);
    });
});

You must use a selector :selected to get the current selected option.

HTML Select unable to get selected value data in javascript

2 Answers2