I'm integrating Postcode anywhere with my web project. I'm using a drop drop for the county/state field. Postcode anywhere returns the name of the County. Can I change the Selected Index when I only have the name? (I'm using a number for the value field which relates to a database field).

I tried the following:

var f = document.getElementById("state_dropdown");
f.options.[f.selectedIndex].text = response[0].County;

I've tried to include the drop down code html here but I can't get it to work properly for some reason.

But of course this just changes the text field for the item in the drop down that is already selected.

I can query the database and find out what ID I have assigned the county but I'd rather not if there is another way.

I'm integrating Postcode anywhere with my web project. I'm using a drop drop for the county/state field. Postcode anywhere returns the name of the County. Can I change the Selected Index when I only have the name? (I'm using a number for the value field which relates to a database field).

I tried the following:

var f = document.getElementById("state_dropdown");
f.options.[f.selectedIndex].text = response[0].County;

I've tried to include the drop down code html here but I can't get it to work properly for some reason.

But of course this just changes the text field for the item in the drop down that is already selected.

I can query the database and find out what ID I have assigned the county but I'd rather not if there is another way.

• javascript

• Not 100% sure I get what you want. By changing the selected index with the name only do you mean with the content of the option tag (the visible string option)? – GillesC Commented Apr 13, 2012 at 11:41

3 Answers 3

Loop over the options until you have a match:

for (var i = 0; i < f.options.length; i++) {
    if (f.options[i].text == response[0].Country) {
        f.options.selectedIndex = i;
        break;
    }
}

Demo.

I would make a function and loop over the labels:

See: http://jsfiddle/Y3kYH/

<select id="country" name="countryselect" size="1">
<option value="1230">A</option>
<option value="1010">B</option>
<option value="1213">C</option>
<option value="1013">D</option>
</select>​

JavaScript

function selectElementByName(id, name) {
    f = document.getElementById(id);
    for(i=0;i<f.options.length;i++){
        if(f.options[i].label == name){
            f.options.selectedIndex = i;
            break;
        }
    }
}
selectElementByName("country","B");

Just a variation on other answers:

<script type="text/javascript">

function setValue(el, value) {
  var sel = el.form.sel0;
  var i = sel.options.length;
  while (i--) {
    sel.options[i].selected = sel.options[i].text == value;
  }
}

</script>
<form>
<select name="sel0">
  <option value="0" selected>China
  <option value="1">Russia
</select>
<button type="button" onclick="setValue(this, 'Russia');">Set to Russia</button>
<input type="reset">
</form>