Question

The div container:

<div id="count"><span>Apple:</span>4</div>

The form dropdown list:

<select id="list" size="6">
  <option selected="selected">Any Number</option>
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5+</option>
</select>

I want to tie the option list to the fruit count. If the div container has a value of "Apple:4", then "Option 4" will be selected, if the div value changes to "Pear:3" then "Option 3" should be selected, so on and so forth.

Here is what I have done so far in jQuery:

var optionObject = document.getElementById('list');
var countValue = document.getElementById("count").childNodes[2].nodeValue;
                
for(var i=0; i<optionObject.length; i++){                        
   if(optionObject.options[i].text == countValue.trim()){
        optionObject.options[i].selected = true;
        break;
   }
}

But nothing happens after execution.

Answer 1

It works, just change the second line to:

var countValue = document.getElementById("count").childNodes[1].nodeValue;

The working jsFiddle.

Think upon it if you have it make it work for numbers > 5 😉