How Do I Preselect an Item in a Drop-Down List?

In HTML, it's pretty easy to preselect an item in a drop-down list. At design-time, or with a dynamic server page, at run-time at the server, all you need to do is add the selected attribute to the <option> element you want to select. If you want to select the item programmatically through JavaScript code, you'll have to follow a different route.

Let's consider the following drop-down list with first names:

<form id="frmPreselect" name="frmPreselect">
  <select id="lstNames" name="lstNames">
    <option value="John">John</option>
    <option value="Sam">Sam</option>
    <option value="Peter" selected="selected">Peter</option>
    <option value="Henri">Henri</option>
  </select>

</form>

The selected="selected" attribute/value pair makes sure the item for Peter is selected when the page loads in the browser.

If you want to change the selected item through JavaScript code, you can use the following method:

<script type="text/javascript">
  function PreselectMyItem(itemToSelect)
  {
    // Get a reference to the drop-down
    var myDropdownList = document.frmPreselect.lstNames;

    // Loop through all the items
    for (iLoop = 0; iLoop< myDropdownList.options.length; iLoop++)
    {    
      if (myDropdownList.options[iLoop].value == itemToSelect)
      {
        // Item is found. Set its selected property, and exit the loop
        myDropdownList.options[iLoop].selected = true;
        break;
      }
    }
  }
</script>

This code that loops through all the items in the drop-down list, checks out their value, and if that value matches the incoming parameter of itemToSelect, the drop-down item gets selected and the loop end. Don't forget that JavaScript is case-sensitive, so you'll have to type in the name exactly the same as it appears in the value attributes of the <option> element.

To execute this code, you'll have to call the PreselectMyItem method, and pass it the value of an item you want to preselect. You can, for example, add a text box and a button to your page, and ask the user for a name, which then gets preselected:

    <option value="Henri">Henri</option>
  </select>
  <input type="text" value="" name="txtName" id="txtName">
  <input type="button" value="Set Name" name="btnDo" id="btnDo"
       onclick="PreselectMyItem(document.frmPreselect.txtName.value)" />
</form>

When you type a name, and then click the Set Name button, the text you typed in the textbox txtName will be passed to the PreselectMyItem method, and if the item is found, it will be selected. Make sure you use proper casing in the name, as the code is ase sensitive.

You can test out a running example of this code.


Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 292
Full URL https://imar.spaanjaars.com/292/how-do-i-preselect-an-item-in-a-drop-down-list
Short cut https://imar.spaanjaars.com/292/
Written by Imar Spaanjaars
Date Posted 05/15/2004 11:53
Date Last Reviewed 06/10/2006 15:59

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.