1

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

ただし、<input type="text">と のdatalist両方を同じ名前 (フォールバックに必要) で組み合わせると、"sex" パラメーターがクエリ文字列に 2 回表示されます。

SO コード スニペットではフォーム送信が機能しなかったため、代わりにこのフィドルを参照してください。「男性」を送信すると、ネットワーク タブに、送信時に という要求が表示されますhttp://www.example.com/?sex=male&sex=。

これにより、バックエンド コードで不安定な動作が発生します (残念ながら、現時点では変更できません)。フォールバックを維持しながら double パラメータを防ぐにはどうすればよいですか?

4

2 に答える 2

0

値のソースとしてand<input type="hidden">を使用する代わりに、「sex」値を使用してシングルを設定することで解決しました。後者のいずれかを変更すると、値が非表示の入力にコピーされます。selectinput 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 に答える