表单 - 传递不带参数名称的选定值
Form - passing selected value without parameter name
假设我有一个像这样的非常基本的形式:
<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 标签中添加 "name",无论 selected 选项将生成如下所示的 URL:
https://www.website.com/?option1=A&option2=B
我希望在参数列表之前应用第一个 selected 选项 (option1),如下所示:
https://www.website.com/A/?option2=B
但是我其实不知道怎么做。
只要选项 1 像这样更改,您就可以更改操作 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>
如果您打开开发人员工具,您会看到该操作发生变化,并且因为没有名称 select 它不会被添加到查询字符串中。
另一种选择是添加提交事件,然后更改操作属性。
假设我有一个像这样的非常基本的形式:
<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 标签中添加 "name",无论 selected 选项将生成如下所示的 URL: https://www.website.com/?option1=A&option2=B
我希望在参数列表之前应用第一个 selected 选项 (option1),如下所示:
https://www.website.com/A/?option2=B
但是我其实不知道怎么做。
只要选项 1 像这样更改,您就可以更改操作 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>
如果您打开开发人员工具,您会看到该操作发生变化,并且因为没有名称 select 它不会被添加到查询字符串中。
另一种选择是添加提交事件,然后更改操作属性。