How do I create sub categories in my html javascript combobox?

L

lee_lee07770

New member
I have created a combobox in my html page which I populated with a JavaScript array. I'll give you an example of my code:
in the <script> tags I have:

var searchTerm = new Array("Apples","Oranges","Bananas","Green Beans","Asparagus","Kiwi","Pear","Broccoli")

function populateCombobox(){


var select = document.getElementById('inputTerm');
searchTerm.sort();



for(i=0; i<searchTerm.length; i++)
{


select.options[select.options.length] = new Option(searchTerm,searchTerm);

}
}

//////And the in the body tag I have: (And note, the body onload populates the combobox when the page is launched.

<FORM id="searchFormIdB" style="float: right" METHOD="LINK" onSubmit="return searchFunctionB(this.goToLink)";>
<p> Keyword:
<SELECT name="goToLink" id="inputTerm">
</SELECT>
<INPUT TYPE="submit" VALUE="Search">
</p>
</FORM>



//Note, of course there is some code here that I left out because it wouldn't affect what I want to do. For example, I removed the function of the submit. Also, the fruits are not my real values, but this is for work so I need to leave exact information out. But this concept will help me do what I need to do.

Anyway, what I would like is when the combo box is expanded that you will see categories where the word is disabled, but all the options in the category are selectable.
So for example:
Fruits:
Apples
Oranges
etc...
Vegetables:
Broccoli
etc...

Is there any way to do this using the formatting I have already implemented?
Something to do with optgroup?
 
Back
Top