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