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

时间:2018-08-20 11:38:01

标签: javascript forms url-parameters

假设我有一个非常基本的形式,如下所示:

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

通过在select标记中使用“名称”,无论选择什么选项,都会生成这样的URL: https://www.website.com/?option1=A&option2=B

我想在参数列表之前应用第一个选定的选项(option1),如下所示:

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

但是我实际上不知道该怎么做。

1 个答案:

答案 0 :(得分:1)

只要option1发生如下更改,您就可以更改操作网址:

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>

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

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