Using jQuery: How to grab option values when user selects from the dropdown

Question

New to jQuery here so I appreciate any tips.

I have three drop downs and I need to grab the value of each option when the user selects them and clicks next step.

I was thinking..

$('selector').click(function(){
  $('selector').val();
});

But I don't know how to use .val()

(function($){

  $(function(){

    $('.dropdown').change(function(event) {
      alert($('.dropdown option:selected').text());
    });

    var cta_markup ='<div class="cta">'+
                      '<div class="caption">'+
                        '<h3>I need help with'+  
                          '<select class="dropdown">'+
                              '<option value="value">WITHDRAWAL</option>'+    
                              '<option value="value1">DETOX</option>'+
                          '</select>'+
                          ' programs for'+
                          '<select class="dropdown">'+
                            '<option value="value">PRESCRIPTION DRUGS</option>'+    
                            '<option value="value">ALCOHOL</option>'+
                            '<option value="value2">ILLICT DRUGS</option>'+
                          '</select>'+
                          'in'+
                          '<select class="dropdown">'+
                            '<option value="value">ALABAMA</option>'+ 
                            '<option value="value">ALASKA</option>'+ 
                            '<option value="value">ARIZONA</option>'+ 
                            '<option value="value">ARKANSAS</option>'+
                            '<option value="value">CALIFORNIA</option>'+
                            '<option value="value">COLORADO</option>'+ 
                            '<option value="value">CONNECTICUT</option>'+ 
                            '<option value="value">DELAWARE</option>'+ 
                            '<option value="value">FLORIDA</option>'+
                            '<option value="value">GEORGIA</option>'+ 
                            '<option value="value">HAWAII</option>'+ 
                            '<option value="value">IDAHO</option>'+
                            '<option value="value">ILLINOIS</option>'+
                            '<option value="value">INDIANA</option>'+
                            '<option value="value">IOWA</option>'+
                            '<option value="value">KANSAS</option>'+
                            '<option value="value">KENTUCKY</option>'+
                            '<option value="value">LOUISIANA</option>'+
                            '<option value="value">MAINE</option>'+
                            '<option value="value">MARYLAND</option>'+
                            '<option value="value">MASSACHUSETTS</option>'+
                            '<option value="value">MICHIGAN</option>'+
                            '<option value="value">MINNESOTA</option>'+
                            '<option value="value">MISSISSIPPI</option>'+
                            '<option value="value">MISSOURI</option>'+
                            '<option value="value">MONTANA</option>'+
                            '<option value="value">NEBRASKA</option>'+
                            '<option value="value">NEVADA</option>'+
                            '<option value="value">NEW HAMPSHIRE</option>'+
                            '<option value="value">NEW JERSEY</option>'+
                            '<option value="value">NEW MEXICO</option>'+
                            '<option value="value">NEW YORK</option>'+
                            '<option value="value">NORTH CAROLINA</option>'+
                            '<option value="value">NORTH DAKOTA</option>'+
                            '<option value="value">OHIO</option>'+
                            '<option value="value">OKLAHOMA</option>'+
                            '<option value="value">OREGON</option>'+
                            '<option value="value">PENNSYLVANIA</option>'+
                            '<option value="value">RHODE ISLAND</option>'+    
                            '<option value="value">SOUTH CAROLINA</option>'+
                            '<option value="value">SOUTH DAKOTA</option>'+
                            '<option value="value">TENNESSEE</option>'+
                            '<option value="value">TEXAS</option>'+
                            '<option value="value">UTAH</option>'+
                            '<option value="value">VERMONT</option>'+
                            '<option value="value">VIRGINA</option>'+
                            '<option value="value">WASHINGTON</option>'+
                            '<option value="value">WEST VIRGINIA</option>'+
                            '<option value="value">WISCONSIN</option>'+
                            '<option value="value">WYOMING</option>'+
                          '</select>'+
                        '</h3>'+
                      '</div>'+
                      '<form action="/facility-search/">'+
                        '<input type="submit" id="btn" value="Next Step">'+
                      '</form>'+

  });
})(jQuery);

https://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — , May 31 '17 at 00:32
You can make multi line quotes by using the ` character (lowercase tilda). — Neil, May 31 '17 at 00:32

J Del · Answer 1 · 2017-05-31T02:26:48.790

0

You were close.

Try:

$( 'selector' ).change(function() {
document.getElementById("selectedoptionvalue").value = $(this).val();
document.getElementById("formid").submit();
});

Note: Your form doesn't currently have an ID, so you will need to add that in.

i.e. change <form action="/facility-search/"> to <form id="formid" action="/facility-search/">

Your form also doesn't have an input inside of it to pass a variable, so you would also need something like this in there:

<input type="hidden" name="selectedoptionvalue" id="selectedoptionvalue" value="">

edited May 31 '17 at 02:26

answered May 31 '17 at 00:32

J Del

831
2
15
31

You don't have to use `$('selector').val()` you can do `$(this).val()` or `this.val()` can't remember the correct syntax off the top of my head. – Baruch May 31 '17 at 00:45
So what do you intend to do with `$(this).val();`? Place it in a variable possibly? – Louys Patrice Bessette May 31 '17 at 02:08
Updated my answer. Hope this answers the question – J Del May 31 '17 at 02:27

Taf Hyseni · Answer 2 · 2017-05-31T02:20:22.477

0

Easier choice would be assigning an ID to your select tag.

<select class="dropdown" id="my-select">

nges (of course that should be inside document ready).

$(document).ready(function(){
  $('#my-select').on('change', function(){
     $( "#my-select" ).val();
  })
}

Reply to my comment if you have any problems during this operation!!

edited May 31 '17 at 02:20

answered May 31 '17 at 00:39

Taf Hyseni

41
3

So what do you intend to do with `$( "#my-select" ).val();` Place it in a variable possibly? – Louys Patrice Bessette May 31 '17 at 02:09
Yes. He can declare it, example: var myValue = $("#my-select").val(); and use it where he needs it (ajax requests, filling field inputs etc.) – Taf Hyseni May 31 '17 at 02:14
ok... That was no obvious in your answer. Since your function, as is, strictly does nothing. – Louys Patrice Bessette May 31 '17 at 02:17
You are right, indeed I was just answering the 'How to get the select value' part. – Taf Hyseni May 31 '17 at 02:21

Louys Patrice Bessette · Answer 3 · 2017-05-31T02:23:56.277

What about using the form tags correctly if you just need to submit?

I assume you append the cta_markup variable somewhere...
See comments within code as explanations.

$(document).ready(function(){   // I just prefer this syntax, which is self explanatory

  $('.dropdown').change(function(event) {
    alert($('.dropdown option:selected').text());
  });

  var cta_markup ='<div class="cta">'+
                    '<form action="/facility-search/">'+  // Place the form open tag here.
                      '<div class="caption">'+
                        '<h3>I need help with'+  
                          '<select name="firstSelect" class="dropdown">'+   // name attribute added here
                            '<option value="value">WITHDRAWAL</option>'+    
                            '<option value="value1">DETOX</option>'+
                          '</select>'+
                          ' programs for'+
                          '<select name="secondSelect" class="dropdown">'+   // name attribute added here
                            '<option value="value">PRESCRIPTION DRUGS</option>'+    
                            '<option value="value">ALCOHOL</option>'+
                            '<option value="value2">ILLICT DRUGS</option>'+
                          '</select>'+
                          'in'+
                          '<select name="thirdSelect" class="dropdown">'+   // name attribute added here
                            '<option value="value">ALABAMA</option>'+ 
                            '<option value="value">ALASKA</option>'+ 
                            '<option value="value">ARIZONA</option>'+

                            // ... A couple lines skipped here, for clarity

                            '<option value="value">WEST VIRGINIA</option>'+
                            '<option value="value">WISCONSIN</option>'+
                            '<option value="value">WYOMING</option>'+
                          '</select>'+
                        '</h3>'+
                      '</div>'+

                      '<input type="submit" id="btn" value="Next Step">'+
                    '</form>'+
                  '</div>';       // This was missing!
});

About what you tried... $('selector').val(); returns the value of $('selector').
You had this right.
But you have to do something with it!

Like to place it in a variable for later use:

myVariable = $('selector').val();

Later use like to look at it in the console:

console.log(myVariable);

score 0 · Answer 4 · answered May 31 '17 at 02:39

You need to use a approach like below since you are using javascript to create the select inputs.

$(document).on('change', '.dropdown', function(){
    // This will give you the option value 
    console.log($(this).val());
    // This will give you the option text 
    console.log($(this).find('option:selected').text());
});

Using jQuery: How to grab option values when user selects from the dropdown

4 Answers4