HTML 带有回退的数据列表导致重复的查询字符串参数

Question

我正在尝试实现一个 datalist 元素，它具有针对旧版浏览器的内置后备功能，如 w3 datalist element 规范中所示：

<form action="http://example.com/" method="GET">
    <label>
        Sex:
        <input name="sex" list="sexes" />
    </label>
    <datalist id="sexes">
        <label>
            or select from the list:
            <select name="sex">
                <option value="" />
                <option>Female</option>
                <option>Male</option>
            </select>
        </label>
    </datalist>
    <input type="submit" />
</form>

但是，<input type="text"> 和 datalist 的组合都具有相同的名称（回退需要）会导致 "sex" 参数在查询字符串中出现两次。

表单提交在 SO 代码段中不起作用，因此请参阅此 fiddle。提交 "Male" 时，网络选项卡显示提交请求 http://www.example.com/?sex=male&sex=。

这会导致后端代码出现一些不稳定的行为（不幸的是我现在无法修改）。如何在保持回退的同时防止双重参数？

Answer 1

我最终通过使用 "sex" 值设置单个 <input type="hidden"> 而不是使用 select 和 input type="text" 作为值的来源来解决它。在更改后者中的任何一个时，我将值复制到隐藏输入。

我碰巧已经包含了 jQuery 所以这是我使用的解决方案：

$('#myForm input, #myForm select').change(function() {
    $('#sex').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://www.example.com/" method="GET" id="myForm">
    <label>
        Sex:
        <input list="sexes" />
    </label>
    <datalist id="sexes">
        <label>
            or select from the list:
            <select>
                <option value="" />
                <option>Female</option>
                <option>Male</option>
            </select>
        </label>
    </datalist>
    <input type="hidden" name="sex" id="sex" />
    <input type="submit" />
</form>

我仍然愿意接受更好的解决方案。

Answer 2

我不知道您是否仍在寻找解决方案，或者我的回答是否支持旧版浏览器，但这正是我想要的。我用了 selectize.

$('#sex').selectize({create: true});

<select id="sex">
  <option value="" />
  <option>Female</option>
  <option>Male</option>
</select>

HTML 带有回退的数据列表导致重复的查询字符串参数

HTML datalist with fallback causes duplicate query string parameters

html

query-string

html-datalist