如何基于选择菜单动态生成HTML表单的action属性链接？

要实现根据两个下拉框选中值动态组合表单action地址，只需添加一段JavaScript代码，在表单提交前修改action属性即可。以下是修改后的完整代码：

<html>
<body>
<h1>CAR</h1>
<form
  target="_blank"
  action="https://www.lipsum.com"
  method="get"
  id="carForm"
>

  <label for="car1">Choose a car 1:</label>
  <select id="car1" name="car1">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <label for="car2">Choose a car 2:</label>
  <select id="car2" name="car2">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select><br><br>

  <input type='submit' value='OK'>

</form>

<script>
// 获取表单和下拉框元素
const form = document.getElementById('carForm');
const car1Select = document.getElementById('car1');
const car2Select = document.getElementById('car2');

// 监听表单提交事件
form.addEventListener('submit', function(e) {
  // 将选中值转为首字母大写格式
  const car1 = car1Select.value.charAt(0).toUpperCase() + car1Select.value.slice(1);
  const car2 = car2Select.value.charAt(0).toUpperCase() + car2Select.value.slice(1);
  
  // 拼接目标URL
  const targetUrl = `https://www.${car1}_${car2}.com`;
  
  // 更新表单action属性
  form.action = targetUrl;
});
</script>

</body>
</html>

关键说明： #

• 给表单添加id="carForm"，便于JavaScript定位元素
• 利用字符串处理方法将下拉框选中的小写值转为首字母大写格式，匹配示例中的Opel_Volvo格式
• 在表单提交时动态拼接目标URL，替换原有固定action后完成提交

内容的提问来源于stack exchange，提问作者Elena Greg