CODEWITHSUNDEEP
jqueryselect
Alexander Marquardt
Alexander Marquardt

Reputation: 1539

JQuery select option that has multiple entries with the same value

I have a program that has a drop-down menu for selecting from a list of countries. Within this list, I have selected N "important" countries that will appear at the top of the list, followed by a listing of all countries, including the countries that appeared in the "important" country part of the list.

For example: 

<select id="id-search-country" name="country"> 
<option value="----">All countries
<option value="AR,,">Argentina       # you can see that this is repeated
<option value="AU,,">Australia
<option value="BR,,">Brazil
<option value="CA,,">Canada
<option value="----">----
<option value="----">All countries
<option value="AF,,">Afghanistan
<option value="AL,,">Albania
<option value="DZ,,">Algeria
<option value="AS,,">American Samoa
<option value="AR,,">Argentina        # repeated here
etc.

When I try to set the value of the users current country by using $(#id-search-country).val(current_country_value), JQuery will select the last item in the list as opposed to selecting the value at the top of the list. I would prefer it to select the country value that appears at the top of the list if it appears there.

Does anyone know how I could configure JQuery to set the current country option to the "important" country (if the current_country_value is in that part of the list), and to only select the country from the remainder of the list if it has not appeared in the "important" part?

Kind Regards

Upvotes: 2

Views: 6151

Answers (5)

Alexander Marquardt
Alexander Marquardt

Reputation: 1539

The accepted solution given above works great if the selected value is in the list, but if it is not found it causes an error in google crome that results in the drop-down menu being completely blanked out. The fix is the following:

first_selector = $("#id-search-country option[value=" + current_country_value +  "]:first"); 
if (first_selector.length) { // check that the selector was found 
    first_selector[0].selected = true; 
} else { 
    $("#id-search-country").val(current_country_value);  // fallback to default JQuery method
}

Upvotes: 0

Jonathon Bolster
Jonathon Bolster

Reputation: 15961

$("select").change(function(){
    $("option[value='" + $(this).val() + "']:first").attr("selected","selected");
});

Basically, for this I use the attribute selector and look for the last element with the value that has just been selected. For duplicates, this will be the one at the top and for single ones, it'll be itself. Then set the selected attribute to tell the browser which should be selected.

Example: http://jsfiddle.net/jonathon/7hgjR/

Upvotes: 2

bozdoz
bozdoz

Reputation: 12860

I think I have an answer. It might be able to be slimmed down a bit, but with a few workarounds, here's what I got:

var options = $.makeArray($('option').each(function(){ return $(this).val()}));
var o = new Array();
for(x in options){
    o.push(options[x].value);
}
var x = o.indexOf('AR,,');
$('#id-search-country option').eq(x).attr('selected', 'selected');

I made the options into an array, then pushed the values to a new array (options.indexOf('AR,,') doesn't work for some reason); then selected the option based on its index, so that the first will be selected.

See it in action

Upvotes: 1

David Tang
David Tang

Reputation: 93664

Edit: After Reigel and I one-upped each other in the comments, it can be achieved with one line of jQuery:

$("#id-search-country option[value=" + current_country_value + "]:first")[0].selected = true;

Upvotes: 6

zsalzbank
zsalzbank

Reputation: 9857

You could try to remove the 'important' countries from the bottom section of the list (the full list), before selecting the country. Then add them back in the correct spots.

The selected item should remain the same.

Upvotes: 0

Related Questions