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 — Semih Arslanoglu
– Semih Arslanoglu, Commented Feb 20, 2021 at 9:40

zahra zamani · Accepted Answer · 2021-02-20 12:00:07Z

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, 2021 at 12:00

zahra zamani

1,38312 silver badges32 bronze badges

answered Feb 20, 2021 at 7:59

Tamil Prakash

1063 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Haroldo Gondim · Accepted Answer · 2021-02-20 08:00:28Z

1

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.

answered Feb 20, 2021 at 8:00

Haroldo Gondim

1545 bronze badges

Collectives™ on Stack Overflow

HTML Select unable to get selected value data in javascript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related