Select a Drop-down List Item Using JavaScript

The following JavaScript functions are useful for selecting items in HTML drop-down lists. As an example, these can be used if you have server-side code returning values that should then be visually selected on the user’s screen without rebuilding the entire page.

<select id="country_list" name="country_list">
  <option value="1">USA</option>
  <option value="2">Canada</option>
  <option value="3">Mexico</option>
</select>

This first function selects an item based on its value. Pass an object referring to a list element, e.g. document.getElementById(“country_list”), and the value that should be selected.

function selectItemValue(list, selectedValue) {
  for(j = 0; j < list.options.length; j++) {
    if(toUpper(list.options[j].value) == toUpper(selectedValue)) {
      list.selectedIndex = j;
      break ;
    }
  }
}

This second function will select an item based on its displayed text name. Pass in an object referring to a list element, e.g. document.getElementById(“country_list”), and the displayed text value that should be selected.

function selectItemText(list, selectedText) {
  for(j = 0; j < list.options.length; j++) {
    if(toUpper(list.options[j].text) == toUpper(selectedText)) {
      list.selectedIndex = j;
      break ;
    }
  }
}

The following is an example of how to call both functions using the example list:

selectItemValue(document.getElementById("country_list"), 1);
selectItemText(document.getElementById("country_list"), "USA");

Disable All Links Within DIV

This JavaScript function disables all links within the specified DIV by setting the link object to ‘disabled’ as well as removing the ‘onclick’ and ‘href’ attributes. This is a useful JavaScript function for form submissions since it prevents the user from clicking another link while an action is pending.

function DisableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = true;
    anchorList[i].onclick = '';
    anchorList[i].removeAttribute('href');
  }
}

The following is a modified version that disables all links within a specified DIV, but it retains a backup of the links so that they can be re-enabled with the EnableAllDIVLinks function.

function DisableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = true;
    anchorList[i].setAttribute('backup_href', anchorList[i].getAttribute("href"));
    anchorList[i].removeAttribute('href');
  }
}

function EnableAllDIVLinks(DivId) {
  var div = document.getElementById(DivId);
  var anchorList = div.getElementsByTagName('a');

  for(var i = 0; i < anchorList.length; i++) {
    anchorList[i].disabled = false;
    anchorList[i].setAttribute('href', anchorList[i].getAttribute("backup_href"));
    anchorList[i].removeAttribute('backup_href');
  }
}