ExtJS Javascript Library for Beginners!

Quick post on how to set a select box to a string string value, after a page has loaded.

In the app I work with we have a list of search engines thus:

<select name="_select_criteria" id="_select_criteria">
 <option value="" selected></option>
 <option value="Altavista">Altavista</option>
 <option value="AOL">AOL</option>
 <option value="Ask Jeeves">Ask Jeeves</option>
 <option value="Comcast">Comcast</option>
 <option value="Earthink">Earthink</option>
 <option value="Google">Google</option>
 <option value="Google Images">Google Images</option>
 <option value="MSN">MSN</option>
 <option value="Netscape">Netscape</option>
 <option value="Windows Live Search">Windows Live Search</option>
 <option value="Yahoo">Yahoo</option>
</select>

Now when the page loads the first time, we have no way of determining what should be selected as the default, after something has been selected, that’s relativly easy to handle server side.

I wrote a quick piece of javascript to come up with a solution to setting the default value of the select box. Thus:

Ext.onReady(function(){
 // set the search box to google as it defaults there.
 // query for the select criteria box.
 var selectbox = Ext.get('_select_criteria');

 Ext.each(selectbox.options, function(item, index){

// iterate and set the select box's selected index to whatever position google is.
 if(item.value == "Google")
 {
     selectbox.selectedIndex = index;
 }
 });
});

That’s why I love Javascript! especially with Ext… Yum!