Question 43131 in Html Question posted in
Some basic documentation can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search