如何從第 2 頁更改 html 下拉菜單中的選項與 onclick function 從第 1 頁 onclick function

Question

我想將下面的代碼分成兩頁而不是一頁。

您看到的代碼在 page-1.html 內。

當您單擊鏈接“設置為 val1”時，下拉菜單會將選項更改為 val1。

當您單擊鏈接“設置為 val2”時，下拉菜單會將選項更改為 val2，依此類推。

有沒有辦法讓頁面 1.html 中的鏈接和頁面 2.html 的下拉列表？

當用戶點擊頁面 1.html 中的鏈接，然后將他直接重定向到頁面 2.html 並根據頁面 1.ZFC35FDC730D5FC69A73EZ 的選擇鏈接自動更改下拉菜單選項？

任何關於它的歡迎的想法

<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>

Answer 1

我建議你使用數據屬性

您的服務器上的代碼：

第 1 頁

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; 
    }
  })
})

---

第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;
})

---

使用 TEST url 的工作示例！

第 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>

第2頁：

 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>

Answer 2

使用視圖 controller 和路由的簡單示例如下：

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文件

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

家庭控制器

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

查看 page2（html 文件）

<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>

Answer 3

我發布了另一個簡化第一頁代碼的解決方案。

page-1.html

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

第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>