javascript - 使用 javascript 更改 标记以使用所选选项值

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 错误。它始终使用在选择中构建我的选项的数组的最后一个 pageID。

如何使用 JavaScript 来确保标记中的 pageID 随着每个选项的选择而变化？

Answer 1

好吧，首先我将 ID 添加到链接中，以便我们可以轻松定位它。
接下来，出于同样的原因，我向选择添加了一个 id。
然后，我为 select 创建了一个更改事件处理程序，并向其添加了逻辑，以首先获取现有的 href，用新值替换 pageID，然后将其设置回链接上的 href，这样它就保留了显示ID参数。

我删除了 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>