'How to change from page-2.html the option from dropdown menu with onclick function from page-1.html

I want to split the below code to two pages instead of one page.

The code you see is inside to page-1.html.

When you click the link "set to val1" the dropdown changing the option to val1.

When you click the link "set to val2" the dropdown changing the option to val2, an so on.

Is there a way to have the links in page-1.html and the dropdown to page-2.html?

When the user click the link which inside in page-1.html, then to redirect him directly to page-2.html and to change the option of dropdown menu automatically base of the choice of link from the page-1.html?

Any ideas about that it's welcoming

<script>
function selectElement(id, valueToSelect) {
  let element = document.getElementById(id);
  element.value = valueToSelect;
}
</script>

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

<div><a href="#" onclick="selectElement('myDropDown','val1')">set to val1</a></div>
<div><a href="#" onclick="selectElement('myDropDown','val2')">set to val2</a></div>
<div><a href="#" onclick="selectElement('myDropDown','val3')">set to val3</a></div>
javascripthtml


Solution 1:[1]

I suggest you use data attributes if you do not want to link directly to the other page like

<a href="page-2.html?id=myDropDown&val=val1">set to val1</a>

which is a simpler version than this

HTML

<div id="nav">
  <div><a href="#" data-id="myDropDown" data-value="val1">set to val1</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val2">set to val2</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val3">set to val3</a></div>
</div>

JavaScript

/// ONLY CHANGE page-2.html to whatever your page2 is called

window.addEventListener("load", function(e) {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName == "A") {
      e.preventDefault()
      const loc = `page-2.html?id=${tgt.dataset.id}&val=${encodeURIComponent(tgt.dataset.value)}`;
      location = loc; 
    }
  })
})

The code on page 2 will in any circumstance be

Page-2:

HTML

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

JavaScript

window.addEventListener("load", function(e) {
  const url = new URL(location.href); 
  const id = url.searchParams.get("id");
  const val = url.searchParams.get("val");
  console.log(url,id,val)
  if (id && val) document.getElementById(id).value=val;
})

Working examples using TEST urls!

Page 1

window.addEventListener("load", function(e) {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName == "A") {
      e.preventDefault()
      const loc = `page2.html?id=${tgt.dataset.id}&val=${encodeURIComponent(tgt.dataset.value)}`;
      console.log(loc)
      // location = loc; // remove comment on your server
    }
  })
})
<div id="nav">
  <div><a href="#" data-id="myDropDown" data-value="val1">set to val1</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val2">set to val2</a></div>
  <div><a href="#" data-id="myDropDown" data-value="val3">set to val3</a></div>
</div>

Page2:

window.addEventListener("load", function(e) {
  // const url = new URL(location.href); // UNCOMMENT THIS ON SERVER AND DELETE THE NEXT LINE 
  const url = new URL("https://yourserver.com/page2.html?id=myDropDown&val=val2"); // DELETE THIS LINE
  const id = url.searchParams.get("id");
  const val = url.searchParams.get("val");
  console.log(url,id,val)
  if (id && val) document.getElementById(id).value=val;
})
<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

Solution 2:[2]

A simple example using view, controller and route would be as follows:

page-1.html

<div class="selection">    
    <a href="{{url("/page-2/{$val}")}}">Set to val1</a>
    <a href="{{url("/page-2/{$val}")}}">Set to val2</a>
    <a href="{{url("/page-2/{$val}")}}">Set to val3</a>
</div>

Web.php file

Route::get('/page-2/{$val}', '\App\Http\Controllers\HomeController@page2');

HomeController

public function page2($val){
    
      return view('page2')->with(['val' => $val]);                                        
}

View page2 (html file)

<select id="myDropDown" name="DropDown_Values">
  <option>Select a val</option>
  <option value="val">val1</option>
  <option value="val">val2</option>
  <option value="val">val3</option>
</select>

Solution 3:[3]

I post another solution that simplify the code in first page.

page-1.html

<div><a href="page-2.html?id=myDropDown&val=val1">set to val1</a></div>
<div><a href="page-2.html?id=myDropDown&val=val2">set to val2</a></div>
<div><a href="page-2.html?id=myDropDown&val=val3">set to val3</a></div>

page-2.html

<script>
  window.addEventListener("load", function(e) {
  const url = new URL(location.href); 
  const id = url.searchParams.get("id");
  const val = url.searchParams.get("val");
  console.log(url,id,val)
  if (id && val) document.getElementById(id).value=val;
 })
</script>

<select id="myDropDown">
  <option>Select a val</option>
  <option value="val1">val1</option>
  <option value="val2">val2</option>
  <option value="val3">val3</option>
</select>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Tinxuanna
Solution 3

Related Questions