使用javascript更改<a>標簽以使用選定的選項值</a>

Question

我正在使用PHP循環在模態內構建選擇列表。

選項會正確顯示，並且在檢查元素時也會顯示適當的選項值（pageID）：

<select name="pageToAssign">
     <?php foreach($activePages as $pages):?>
     <option value="<?php echo $pages['id']?>"><?php echo $pages['id']?><?php echo $pages['title']?></option>
     <?php endforeach?>
</select>
<a href="assignPage.php?pageID=<?php echo $pages['id']?>&displayID=<?php echo $_GET['displayID']?>" class="btn btn-primary" role="button"> Assign Page</a>

問題是，當我單擊提交鏈接時，它將命中我的php腳本並在數據庫中執行更新，但是頁面ID錯誤。 它始終使用在select中構建我的選項的數組的最后pageID。

我如何使用javascript來確保標簽中的pageID隨選擇的每個選項而變化？

Answer 1

好吧，所以首先我將id添加到鏈接中，以便我們可以輕松地定位它。
接下來，出於相同的原因，我向選擇添加了ID。
然后，我為select創建了一個更改事件處理程序，並為其添加了邏輯，以首先獲取現有的href，將pageID替換為新值，然后將其重新設置為鏈接上的href，從而保留了displayID參數。

我刪除了php部分，因此可以在可運行的代碼段中對其進行測試。

 document.getElementById('pageToAssign').addEventListener('change', function() { var assignPage = document.getElementById('assignPage'); var href = assignPage.getAttribute('href'); assignPage.href = href.replace( /pageID=[^&]+/, 'pageID='+ this.value ); }); 

 <select name="pageToAssign" id="pageToAssign"> <option value="10">10</option> <option value="15">15</option> <option value="43">43</option> </select> <a href="assignPage.php?pageID=0&displayID=67" class="btn btn-primary" id="assignPage" role="button"> Assign Page</a>