我的編碼經驗很少，但通常是一個快速學習者，并且一直在逐項查找內容以學習如何創建網頁所需的一些簡單內容。我希望能夠在我的 URL 中使用查詢字串自動填充表單（即，example.com?color=blue 將自動加載表單，其中在名為“color”的表單部分中已經填寫了選項“blue”）。這是我生成表單的 html 代碼部分：
<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>所以我想如果我輸入我網站的 URL，然后是 ?Photo=Pelicans 或 ?Photo=Dolphins，那個表格會自動分別填寫 Pelicans 或 Dolphins 的答案。顯然這不起作用，我現在的理解是我需要一些 javascript 代碼來使查詢字串像那樣作業？但是我已經嘗試了幾個星期來弄清楚如何做到這一點，逐行檢查我能找到的每個相關示例代碼，以試圖了解他們在做什么，但沒有一個奏效。是否有一個相對簡單的代碼可以完成這個功能，或者我完全超出了我作為菜鳥的深度？
uj5u.com熱心網友回復：
假設您嘗試從提供給用戶的當前 URL 中獲取引數，并相應地選擇元素。
我已經為你撰寫了 javascript 代碼。檢查它是否有效。如果您想在 javascript 中使用當前URL更新。URLwindow.location.href
var url_string = "http://www.mywebsite.com?photo=Rams"; //window.location.href (set for current url)
var url = new URL(url_string);
var c = url.searchParams.get("photo");
document.querySelector('option[value="' c '"]').selected = true
console.log(c);<form id="wsite-com-product-options">
<div class="wsite-com-product-option-groups">
<div class="wsite-com-product-option wsite-com-product-option-dropdown" data-type="dropdown" data-option-name="Photo">
<label class="wsite-com-product-label " for="wsite-com-product-option-Photo">
<b class="wsite-com-product-title">Photo</b>
</label>
<select id="wsite-com-product-option-Photo" class="wsite-field " name="Photo" >
<option selected="selected" value="">--</option>
<option class="wsite-com-dropdown" value="Pelicans">
Pelicans
</option>
<option class="wsite-com-dropdown" value="Dolphins">
Dolphins
</option>
<option class="wsite-com-dropdown" value="Rams">
Rams
</option>
</select>
</div>
</div>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/376003.html
標籤：javascript html 形式 请求参数 自动填充