Send value from select option

Question

I have a select option like this:

<select class="sortBybUTT">
  <option value="0" disabled selected>Sort by</option>
  <option value="1">Highest price</option>
  <option value="2">Lowest Price</option>
  <option value="3">Most Recent</option>
  <option value="4">Most popular</option>
  <option value="5">Discount</option>
</select>

What I'm trying to do is to send data to JavaScript every time I change it without a submit button.

After I take the data to create a URL and redirect with JavaScript.

Example: data = Lowest Price = value 2: my_shop.html?sort_by=2

Use a change event listener on the ` – charlietfl Jan 02 '21 at 14:23 — charlietfl, Jan 02 '21 at 14:23

Clayton Gearhart · Answer 1 · 2021-08-13T12:53:49.467

0

You could use an event listener then get the data.

let select = document.getElementsByClassName("sortBybUTT")[0];

select.addEventListener("change", function () {
    let data = select.value;
});

These might help you out:

edited Aug 13 '21 at 12:53

answered Jan 02 '21 at 14:30

Clayton Gearhart

43
1
6

The above code doesn't work, because the variable "select" is undefined due to the fact that the select tag is using the **class** "sortBybUTT" and not the id. – Kai Jan 02 '21 at 14:36

Kai · Accepted Answer · 2021-01-02T14:39:43.940

0

Use the onchange event.

let element = document.getElementsByClassName("sortBybUTT")[0];
element.addEventListener("change", () => {
    console.log(element.value);
});

edited Jan 02 '21 at 14:39

answered Jan 02 '21 at 14:31

Kai

323
2
10

Send value from select option

2 Answers2