JS修改基于URL的填充联系人表单下拉列表

在JavaScript中，修改基于URL的填充联系人表单下拉列表通常涉及到从URL中提取参数，然后使用这些参数来动态更新HTML中的下拉列表（<select>元素）。以下是一个基础的示例，展示了如何实现这一功能：

基础概念

URL参数解析：从当前页面的URL中提取查询参数。
DOM操作：使用JavaScript来查询和修改HTML文档对象模型中的元素。

类型与应用场景

类型：这是一种基于前端JavaScript的动态内容加载技术。
应用场景：适用于需要根据不同条件展示不同选项的表单，如联系人列表、产品筛选等。

示例代码

假设我们有一个URL如下：http://example.com/form?contact=John，我们希望根据contact参数的值来更新下拉列表。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Dropdown</title>
</head>
<body>

<select id="contactSelect">
  <option value="">Select a contact</option>
  <option value="John">John Doe</option>
  <option value="Jane">Jane Smith</option>
  <option value="Mike">Mike Johnson</option>
</select>

<script>
// Function to get URL parameter by name
function getQueryParam(param) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
}

// Update dropdown based on URL parameter
document.addEventListener('DOMContentLoaded', function() {
  const contactParam = getQueryParam('contact');
  if (contactParam) {
    const selectElement = document.getElementById('contactSelect');
    selectElement.value = contactParam;
  }
});
</script>

</body>
</html>