Selecting a value in drop down list using javascript

Question

A] Summary of the problem:

Trying to pre-select a users country on page load

B] Details:

1] I am using maximinds javascript to find out a users county.

2] I have a drop down list which contains a list of 225 or so countries.

3] Inside the javascript section of my HTMLr page, I am trying to select the users country from the drop-down list.

But the country is not getting selected

C] Code excerpt:

<select name="country_name" id="id_country_name">
 <option value="" selected="selected">---------</option>
 <option value="Afghanistan">Afghanistan</option>
 <option value="Aring land Islands">Aring land Islands</option>
</select>


<!-- including the  geoip javascript library -->
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
<!-- By default, we will select users country -->       
<script type="text/javascript" language="JavaScript">
document.getElementById(geoip_country_name()).selected = true
</script>

Thanks,

[Edit#1]

Tried the following jquery code, but this isnt populating the drop-down list:

<!-- including the  geoip javascript library -->
  <script src="http://j.maxmind.com/app/geoip.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function () {
        $("option[value='" + geoip_country_name() + "']").attr('selected', 'selected');
    });
 </script>

[Edit#2]

Tried the $("#id_country_name").val(geoip_country_name());,

<div id="userDataForm">
  <form method="POST" action="/UserReporting"> 
  <table>
      <!-- Printing the forms for users country, city -->
      <tr><th><label for="id_country_name">Country name:</label></th><td>
      <select name="country_name" id="id_country_name">
    <option value="" selected="selected">---------</option>
    <option value="Afghanistan">Afghanistan</option>
        <option value="Aring land Islands">Aring land Islands</option>
        <option value="Albania">Albania</option>
      </select>
      </td></tr>
      <tr><th>
      <label for="id_city_name">City name:</label></th><td><input type="text" name="city_name" id="id_city_name" /></td></tr>     
 </table>

 <input type="submit" name="report_up" value= "Report Up">
 <input type="submit" name="report_down" value= "Report Down">
 </form>

 <!-- including the  geoip javascript library -->
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script src="http://j.maxmind.com/app/geoip.js" type="text/javascript">
</script>
<script type="text/javascript">
    $(function () {
        $("#id_country_name").val(geoip_country_name());
    });
</script>

You are trying to get refernces to the options by id but they don't have ids, so give each option an id of the country name. As the text must match exactly, you might be better to use all lower case, so: <option id="afghanistan" value="Afghanistan">...</option> and then: document.getElementById(geoip_country_name().toLowerCase())... — RobG
– RobG, Commented Apr 5, 2011 at 1:33

David Fullerton · Accepted Answer · 2011-04-05 02:14:37Z

1

The document.getElementById call would only work if each <option> in your HTML had the country name as the id (replacing spaces with "_" or something similar):

<select name="country_name" id="id_country_name">
 <option value="" selected="selected">---------</option>
 <option id="Afghanistan" value="Afghanistan">Afghanistan</option>
 <option id="Aring_land_Islands" value="Aring land Islands">Aring land Islands</option>
</select>

However, I'd lean towards this approach with jquery, as it doesn't require giving every option its own id:

$(function () {
    $("#id_country_name").val(geoip_country_name());
});

edited Apr 5, 2011 at 2:14

answered Apr 5, 2011 at 1:34

David Fullerton

3,24429 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

bhavesh Over a year ago

I tried your suggestion and have pasted the code in "Edit#1", but this hasnt worked and the drop-down box shows up with the "------" as the selected value.

David Fullerton Over a year ago

@lance Sorry about that. Try using val instead. I updated my answer.

David Fullerton Over a year ago

@lance make sure the id of the select is actually "id_country_name" - I'm not sure if that was just a placeholder in your example. I tested this and it works correctly if the value from geoip_country_name matches exactly the value attribute on the option.

bhavesh Over a year ago

your answer has worked. I have copied the code in "Edit#2" of my main posting. I agree with you the value returned by "geoip_country_name" needs to match with the option values in the drop down list.

Matt Healy · Accepted Answer · 2011-04-05 01:28:51Z

1

Try

document.getElementById('id_country_name').selectedIndex=index;

where index is an integer corresponding to the selection you want.

answered Apr 5, 2011 at 1:28

Matt Healy

18.6k5 gold badges59 silver badges57 bronze badges

1 Comment

bhavesh Over a year ago

Thankyou @matthewh for the response. I have the name of the country from the method call "geoip_country_name()" but not a index value. So for example "geoip_country_name()" will return a name like "Afghanistan" and i want "Afghanistan" to be selected.

Collectives™ on Stack Overflow

Selecting a value in drop down list using javascript

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related