How do I save two variables based on a dropdown selection and then trigger an event?

Question

I've study this thread for two days and still can't figure out what I should do. Change <select>'s option and trigger events with JavaScript

What I am trying to do is have two dropdown selection lists, and when the user makes the selection, it passes two parameters and loads another page.

I've looked at something like this:

<select name="Box 1" >
  <option val1 ="One" val2="One">1.1</option>
  <option val1 ="One" val2="Two">1.2</option>
  <option val1 ="One" val2="Three">1.3</option>
</select>
<select name="Box 2" >
  <option val1 ="Two" val2="One">2.1</option>
  <option val1 ="Two" val2="Two">2.2</option>
  <option val1 ="Two" val2="Three">2.3</option>
</select>

The JavaScript code would be something like this:

window.location.href = 'sheet_2.html?s2_val1='+val1+'&s2_val2='+val2;

What I want to happen is that if a user clicks on either dropdown and makes a selection, the code will load the sheet_2 with data based on the two variables. I don't want a "submit" or "go" button on sheet 1.

I think something around the "onclick" is what I want but this is my first time with a dropdown list and I don't know if that's what I should do.

Again, I'm very new at this, but can someone explain what I should do and help me understand why?

The code was originally written by someone else who had a bunch of buttons on the first page. I don't know if that's because it's difficult to do this with dropdowns or because they were not experienced with dropdowns.

Do you only want the redirection to happen when the user selects a value in the 2nd dropdown? — scunliffe, Apr 03 '23 at 18:36
You might want to start by reading the documentation for the [option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option) element and its attributes. Which `val` and `val2` should be be used if an option is chosen from each select? You might also read up on [event listeners](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). — mykaf, Apr 03 '23 at 18:37
In addition, if you don't have a dedicated "Submit" button, this won't work if you don't have a 'blank' option at the top of your select lists, as the user won't ever be able to pick the first option, as it will already be selected. — scunliffe, Apr 03 '23 at 18:37
Minor, but I'd *highly* recommend never to use a space in your `name` or `id` attribute values, it will likely cause you all kinds of trouble. — scunliffe, Apr 03 '23 at 18:38
@scunliffe, no I want the redirection to occur regardless of whether they select a option from either dropdown list. — LEBoyd, Apr 03 '23 at 18:43
what kind of options are this? `` val1? val2? those are not valid attributes. And this ` — Chris G, Apr 03 '23 at 18:46
@ChrisG Yes, that is correct. I was only trying to show that I wanted two values set depending on the selected option. I don't know how to set two variable with one selection (other than creating a large if statement in the javascript, which I would prefer not to do). — LEBoyd, Apr 03 '23 at 18:49
That and do you want the redirection to occur only when `2nd dropdown` is selected? Does that mean that `dropdown 1` has a blank option or first option is selected by default? If thats the case then you will definetely need a blank option for the second dropdown — Chris G, Apr 03 '23 at 19:01
@ChrisG Thank you for the help. I'll try to explain better. The total number of options is fifty. That's too many imho for a user, so I want to break the options list into two (or three or more). So, if a user clicks on an option in box 1 *OR* box 2, the process should call the second page and pass whatever the two variable values are for that option. So, if they click on an option it will immediately trigger the code and second page. Does that help at all or just more confusing? — LEBoyd, Apr 03 '23 at 19:06
In other words you want an `onchange` event on every `input select` and send 2 values depending on selection. You will need to use `data-` attributes for that. already have good example of how to use those in the answers — Chris G, Apr 03 '23 at 19:11

score 1 · Accepted Answer · answered Apr 03 '23 at 19:01

For values you can use html data- attributes. You can attach addEventListener to the parent element and in the handler use target to get the current element's dataset :

const boxes = document.getElementById('boxes');

const handler = (event) => {
  const target = event.target;
  const { val1, val2 } = target.options[target.selectedIndex].dataset;
  if (val1 && val2) {
    const url =`sheet_2.html?s2_val1=${val1}&s2_val2=${val2}`;
    console.log(url);
    //window.location.href = url;
  }
};

boxes.addEventListener('change', handler);

<div id="boxes">
<select name="Box 1" id="box1">
  <option data-val1="One" data-val2="One">1.1</option>
  <option data-val1="One" data-val2="Two">1.2</option>
  <option data-val1="One" data-val2="Three">1.3</option>
</select>

<select name="Box 2" id="box2">
  <option data-val1="Two" data-val2="One">2.1</option>
  <option data-val1="Two" data-val2="Two">2.2</option>
  <option data-val1="Two" data-val2="Three">2.3</option>
</select>
</div>

score 0 · Answer 2 · answered Apr 03 '23 at 19:07

You can use data options to set the values and get them from the Select dataset object to create the url as you want.

In the end you just need to use the generated url string on the window redirect.

var val1 = null;
var val2 = null;
var select1 = document.querySelector("#select1");
var select2 = document.querySelector("#select2");

select1.addEventListener("change", function(e) {
  val1 = select1.options[select1.selectedIndex].dataset.val1;
  val2 = select1.options[select1.selectedIndex].dataset.val2;
  
  document.getElementById("url").innerText = updateURL(val1, val2);

});

document.getElementById("select2").addEventListener("change", function(e) {
  val1 = select2.options[select2.selectedIndex].dataset.val1;
  val2 = select2.options[select2.selectedIndex].dataset.val2;
 
  document.getElementById("url").innerText = updateURL(val1, val2)
});

function updateURL(val1, val2) {
  return 'sheet_2.html?s2_val1='+val1+'&s2_val2='+val2;
}

<select name="Box 1" id="select1">
  <option data-val1="One" data-val2="One">1.1</option>
  <option data-val1="One" data-val2="One">1.1</option>
  <option data-val1="One" data-val2="Two">1.2</option>
  <option data-val1="One" data-val2="Three">1.3</option>
</select>
<select name="Box 2" id="select2">
  <option data-val1="Two" data-val2="One">2.1</option>
  <option data-val1="Two" data-val2="Two">2.2</option>
  <option data-val1="Two" data-val2="Three">2.3</option>
</select>

<div id="url"></div>

How do I save two variables based on a dropdown selection and then trigger an event?

2 Answers2