1

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

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

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

表单提交在 SO 代码片段中不起作用，因此请参阅此小提琴。提交“男性”时，网络选项卡会在提交时显示一个请求，上面写着http://www.example.com/?sex=male&sex=。

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

4

2 回答 2

0

我最终通过设置一个<input type="hidden">带有“sex”值而不是使用selectandinput 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>

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

于 2015-04-21T21:07:30.927 回答
-2

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

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

<select id="sex">
  <option value="" />
  <option>Female</option>
  <option>Male</option>
</select>
于 2017-09-26T14:17:55.180 回答