How to transfer selected values from select element to javascript?

Question

i have a select element with multiple selection, like this:

<select multiple>
  <option value="en">English</option>
  <option value="de">German</option>
</select>

And i have a javascript, which should use selected values, looking like:

$.ajax({
                url: window.location.protocol + "//example.com/search",
                jsonp: "jsonp",
                dataType: "jsonp",
                data: {
                q: querykeyword,
                client: "chrome",
                hl: "HERE SHOULD APPEAR ONE OR TWO SELECTED VALUES"
                }

So the last code line should look like hl: "en" or, hl: "de", or hl: ["en","de"].

How can i transfer values from select element into javascript?

It would make your backend less complicated if you sent hl: ["en"] and consistently sent an array — Taplar
– Taplar, Commented Dec 30, 2020 at 19:13
Does this answer your question? How to get all selected values from <select multiple=multiple>? — Heretic Monkey
– Heretic Monkey, Commented Dec 30, 2020 at 19:20

topdev87 · Accepted Answer · 2020-12-31 00:48:30Z

2

Use selectedOptions property.

var selectedOptions = document.querySelector("select").selectedOptions;
var values = [];
for (let i=0; i<selectedOptions.length; i++) {
  values.push(selectedOptions[i].value);
}

.value will not work, as it will show only one selected option.

console.log(document.querySelector("select").value)

<select multiple>
  <option value="volvo" selected>Volvo</option>
  <option value="saab" selected>Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

edited Dec 31, 2020 at 0:48

answered Dec 30, 2020 at 19:15

topdev87

8,7913 gold badges11 silver badges33 bronze badges

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

9 Comments

Scott Marcus Over a year ago

You just need to get the .value of the select. Also, instead of deleting an answer and then posting a new one, you can just edit your deleted answer and then undelete it.

topdev87 Over a year ago

.value() will return the only one value when you select multiple options.

topdev87 Over a year ago

as per OP, there is no dropdown mention, w3schools.com/tags/att_select_multiple.asp

Heretic Monkey Over a year ago

This question has been asked and answered many times before. There is no reason to answer it again.

Heretic Monkey Over a year ago

@OrAssayag In the OP: <select multiple>, which means the user can select multiple options.

|

Or Assayag · Accepted Answer · 2020-12-30 19:34:29Z

0

You need to take the selected value from the select element. You can do that by: document.querySelector("select").value, so the full solution for your code will be:

$.ajax({
      url: window.location.protocol + "//example.com/search",
      jsonp: "jsonp",
      dataType: "jsonp",
      data: {
        q: querykeyword,
        client: "chrome",
        hl: document.querySelector("select").value
      });

edited Dec 30, 2020 at 19:34

answered Dec 30, 2020 at 19:11

Or Assayag

6,39213 gold badges73 silver badges109 bronze badges

11 Comments

Heretic Monkey Over a year ago

A dump of code is rarely a great answer. Code, properly formatted, along with an explanation of the code and why/how it works is much more often upvoted (on questions which are not common duplicates).

topdev87 Over a year ago

.value will show only one selected option. refer to my answer about the example.

Heretic Monkey Over a year ago

Or, refer to the answers to the duplicate question.

topdev87 Over a year ago

no it's correct. according to his question description, he need hl: ["en","de"]

Evgeniy Over a year ago

yes, you are right :( its only one value here

|

Collectives™ on Stack Overflow

How to transfer selected values from select element to javascript?

2 Answers 2

9 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related