Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Java Script to Get Selected Item from Select List Option Group

By Stephen Bucaro

An <optgroup> element allows you to group related options in a drop-down select list. Shown below is code for an example of a select list using <optgroup> elements.

<form id="myForm">
  <select id="mySelect" >
  <optgroup label="group1">
  <option value=1>item1</option>
  <option value=2>item2</option>
  <option value=3>item3</option>
  </optgroup>
  <optgroup label="group2">
  <option value=4>item4</option>
  <option value=5>item5</option>
  <option value=6>item6</option>
  </optgroup>
  </select>

  <input type="button" value="Submit" onclick="getOption(this.form)">
<form>

since you may have identically named items in multiple optgroups, you need to a way to get the name of the optgroup as well as the name of the option. The code to get this information from the example select list is shown below.

<script>

function getOption(form)
{
var selIndex = form.mySelect.selectedIndex;

var G = form.mySelect.options[parseInt(selIndex)].parentNode.label;

var selText = form.mySelect.options[parseInt(selIndex)].text;

alert(G + " " + selText);

}

</script>

The onclick event of the form's button calls the getOption function, passing it the form as a parameter. The first line in the code extracts the index of the selected option from the select list. The second line of the code uses that index to get the label of the parent node of the selected item, which would be the optgroup element's text. The third line of code uses the index to get the text of the selected option.

You should be able to use this example to design your own select list with optgroups and write the code to get the name of the optgroup as well as the name of the option.

More Java Script Code:
• Create a Mouse Click Sound Effect
• How to Place Image on HTML5 Canvas
• Java Script to Get Selected Item from Select List Option Group
• Easy JavaScript FileReader Code
• How to Use HTML5 canvas arc and arcTo Functions
• Java Script Message Boxes
• Including Special Characters in a JavaScript String
• Regular Expression Basics : Match a Set of Characters
• Code to Block the Ad Blockers
• Calculators for Your Web Site : Body Mass Index