Will "the Mighty" Strohl

jQuery - Change the Default Option in a Select Listbox

If you haven't already heard all of the hub-bub about jQuery, it is quite simple. jQuery is an open source JavaScript library.  It's main purpose is to make your JavaScript development easier, and faster.  Oh BOY does it!!!  We have been using it on our production sites for about 2 weeks now.

First Day Using jQuery

Today, I had to change the default selection of a SELECT listbox on the client-side, after page load in a DotNetNuke module.  jQuery was the obvious candidate to make this happen.  Especially since I've done this before using JavaScript, and I know how much code it can take to make it happen reliably and on all major web browsers.

I set out to make this happen.  However, I fell into a learning curve that I didn't expect to hit.  It reminded me of when I was trying to first learn VB.Net, and I was thinking of binding data recordset-style instead of the prescribed (at the time) dataset style.  I was just thinking in the wrong way.  I had to adapt and understand how I was supposed to use the API.

After a full day of using jQuery, I cannot believe how powerful using jQuery can be.

Changing the Default Select Listbox Option

I had a form that had an HTML listbox on the page.  It rendered, selecting a default value that I was asked to change to another value.  This is an ideal test case.  Let's say that we have the following SELECT element on a web page.

<select id="cboDays" name="cboDays">
<option value="Sunday" selected="selected">Sunday</option>
<option value="Monday">Monday</option>
<option value="Tuesday">Tuesday</option>
<option value="Wednesday">Wednesday</option>
<option value="Thursday">Thursday</option>
<option value="Friday">Friday</option>
<option value="Saturday">Saturday</option>

The default selected value is the Sunday OPTION.  For our example, let's say that we need for the default value on page load to be Wednesday instead.

We could do this via our typical JavaScript methods, but that is a lot of work.  Let's instead use jQuery.  First of all, you need to download the jQuery script library and include it on your website/page.

Now I am going to hit you with a huge eye opener.  Here is the jQuery script that will solve our problem:

jQuery("select#cboDays option[selected]").removeAttr("selected");
jQuery("select#cboDays option[value='Wednesday']").attr("selected""selected");

Could it be???  Only two lines of JavaScrip code???  Yes.  It works.  I could go into very great detail about all of the ins and outs of selectors, but the jQuery documentation already does a great job of it for me. 

Basically, the first portion, jQuery(string) is the selector.  Selectors always return a collection of Object.  Something I LOVE about jQuery is its CSS-style of selecting HTML elements on the page.  This makes it incredibly easy to find and manage HTML elements if you've had any experience using CSS at all.

In the first line of code, all OPTION children of the SELECT element with the ID of "cboDays" are selected.  In our case, there is only one element.  The second method call seeks to remove any SELECTED attributes in the OPTION tag.

The next line of code uses a similar selector, but only returns a single object matching the OPTION child of the same SELECT element.  The OPTION element we selected was the one with the attribute, VALUE, having the value of "Wednesday."

Sounds simple enough, right?  I am geeking out over this!

I hope that this blog entry gives you a little more confidence to write your own jQuery scripts, or answers a question you've had.

Technorati Tags: , , ,

blog comments powered by Disqus