下拉菜单（选择）未突出显示已选中=“已选中”选项

Question

I'm building a search form but have something strange going on with the selected="selected" option not being highlighted.

The form's pulling data from a database and duplicates are then being removed using javascript (seen below). The website is built using ExpressionEngine and the form is using Solspace Super Search.

The strange thing is that for option's that only display one result such as 'Andover', the dropdown selects 'Andover' but if more than one result is found (such as Bournemouth) then the dropdown reverts to the first option (All locations) rather than Bournemouth, even though the Bournemouth option features selected="selected".

Here's a sample of the code that's being output, any ideas what's going on here?

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

Here's the script that's removing duplicates if that helps:

$(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);
});

As always, any thoughts or suggestions are welcome.

Thanks in advance,

Tom

Answer 1

I just made some add in your js code to make it work. Just give it a look.

$(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);
});