HTML DataList控件與回退會導致重複的查詢字符串參數

我試圖實現與舊版本瀏覽器內置的後備廣告datalist元素，在W3 datalist element規範的證明：HTML 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都具有相同的名稱（fallback需要）導致「sex」參數在查詢字符串中出現兩次。

表單提交在SO代碼片段中不起作用，因此請參閱fiddle。提交「男性」時，網絡選項卡會顯示提交請求http://www.example.com/?sex=male&sex=。

這會在後端代碼中產生一些令人毛骨悚然的行爲（我現在不能很好地修改）。我怎樣才能防止雙參數，同時保持後備？

來源

2015-04-20 Stephan Muller

我最終通過設置單個<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>

我還是開到更好的解決方案。

來源

2015-04-21 21:07:30

-1

我不知道您是否仍在尋找解決方案，或者我的答案是否支持舊版瀏覽器，但這正是我所期待的。我用selectize。

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

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

來源

2017-09-26 14:17:55

HTML DataList控件與回退會導致重複的查詢字符串參數

回答

相關問題