表单 - 传递不带参数名称的选定值

Posted 2023-02-22

【中文标题】表单 - 传递不带参数名称的选定值

【英文标题】：Form - passing selected value without parameter name

【发布时间】：2019-01-26 12:53:19

【问题描述】：

假设我有这样一个非常基本的表格：

<form action="https://www.website.com/">
    <select name="1option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="2option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</form>

通过在选择标签中添加“名称”，无论选择什么选项都会生成如下所示的 URL： https://www.website.com/?option1=A&option2=B

我希望在参数列表之前应用第一个选定的选项（option1），如下所示：

https://www.website.com/A/?option2=B

但我其实不知道该怎么做。

【问题讨论】：

请附上minimal reproducible example，说明您迄今为止为解决问题所做的尝试。

【参考方案1】：

每当 option1 像这样更改时，您都可以更改操作 url：

var option = document.querySelector('[data-name="1option"]');
var form = document.querySelector('form');
option.addEventListener('change', function() 
  form.setAttribute('action', 'https://www.website.com/' + option.value);
);

<form action="https://www.website.com/">
    <select data-name="1option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
    <select name="2option">
        <option value="A">A</option>
        <option value="B">B</option>
        <option value="C">C</option>
    </select>
</form>

如果您打开开发人员工具，您将看到该操作发生了变化，并且由于该选择没有名称，因此不会将其添加到查询字符串中。

另一种选择是添加提交事件，然后更改操作属性。

【讨论】：

@Luca 不会因为没有name属性，而是data-name，就像id一样。