下拉菜單（選擇）未突出顯示已選中=“已選中”選項

Question

我正在構建搜索表單，但是在執行select =“ selected”選項時未顯示出一些奇怪的地方。

然后使用javascript（如下所示）刪除表單從數據庫中提取的數據和重復項。 該網站使用ExpressionEngine構建，表單使用Solspace Super Search。

奇怪的是，對於僅顯示一個結果（例如“ Andover”）的選項，下拉列表選擇“ Andover”，但是如果找到多個結果（例如伯恩茅斯），則下拉列表將還原為第一個選項（所有位置）即使伯恩茅斯選項的功能為selected =“ selected”，也比伯恩茅斯高。

這是正在輸出的代碼的示例，這里有什么想法嗎？

<select name="club_feed_town" id="locationList">
    <option value="">All Locations</option>
    <option value="Andover">Andover</option>
    <option value="Bishops waltham">Bishops Waltham</option>
    <option value="Blandford forum">Blandford Forum</option>
    <option value="Boscombe">Boscombe</option>
    <option selected="selected" value="Bournemouth">Bournemouth</option>
</select>

如果有幫助，以下是刪除重復項的腳本：

$(document).ready(function() {
  var optionValues = [];
  var lastRemoved = null;
  $('#locationList option').each(function(){
     if($.inArray(this.value, optionValues) >-1){
        $(this).remove();
        // remember the very last removed one
        lastRemoved = $(this);
     }else{
        optionValues.push(this.value);
     }
  });
  // after removing duplicates, add the very last removed one back to the list
  $('#locationList').append(lastRemoved);
});

一如既往，歡迎任何想法或建議。

提前致謝，

湯姆

Answer 1

我只是在您的js代碼中添加了一些內容以使其正常工作。 看看吧。

$(document).ready(function() {
  var optionValues = [];
  var lastRemoved = null;
  $('#locationList option').each(function(i){
     if($.inArray(this.value, optionValues) >-1){
       //////////////////////add in code///////////////////////////////
        if($(this).prop('selected')){
          $(this).removeAttr("selected");
        }
       $('#locationList').prop('selectedIndex',i-1);
       //////////////////////end of my code//////////////////////////////
       // remember the very last removed one
       $(this).remove();
       lastRemoved = $(this);
     }else{
        optionValues.push(this.value);
     }
  });
  // after removing duplicates, add the very last removed one back to the list
  $('#locationList').append(lastRemoved);
});