Use OPTGROUP in your select lists... 3

[mwolf00]

I just learned this neat little code. It didn't used towirk in IE5 and NS4.7, but I've tested it in IE6 and NS7 and it works in both!!!!


<select>
<optgroup label=&quot;sublist one&quot; style=&quot;color:blue;&quot;>
<option>this
<option>is
<option>only
<option>a
<option>test
<optgroup label=&quot;sub2&quot; style=&quot;color:red;&quot;>
<option>to
<option>see
<optgroup style=&quot;background-color:silver;&quot;>
<option>if
<option>it
<option>works
</select>

Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[tviman]

Neat! Thanks Rick! I think probably about a 1000 people have wanted to do this and have tried every hack imaginable! This is neat, clean, and as you say, works in IE and NS7!

Thanks!!!

There's always a better way. The fun is trying to find it!

 

[simonchristieis]

mmwolf00,

I was playing with this a little while ago - I dismissed them because I couldn't create them dynamically.

Have you managed to?

Is so, I'm all ears.


Simon

 

[BillyRayPreachersSon]

Maybe document.createElement('optgroup') would work?

Haven't tried it, but the theory is good ;o)

Dan

 

[mwolf00]

Simon - I had to try....

What is your preferred vacation spot?<br>
<SELECT NAME=&quot;Vacation Spots&quot; id=&quot;mySelect&quot; onChange=&quot;showInfo(this.value)&quot;>


<OPTGROUP LABEL=&quot;USA Beaches&quot; id=&quot;og1&quot;>
<OPTION VALUE=&quot;Florida&quot; id=&quot;1_1&quot;>Florida</OPTION>
<OPTION VALUE=&quot;Hawaii&quot; id=&quot;1_2&quot;>Hawaii</OPTION>
<OPTION VALUE=&quot;Jersey&quot; id=&quot;1_3&quot;>Jersey Shore</OPTION>
</OPTGROUP>

<OPTGROUP LABEL=&quot;European Cities&quot; id=&quot;og2&quot; >
<OPTION VALUE=&quot;Paris&quot; id=&quot;2_1&quot;>Paris</OPTION>
<OPTION VALUE=&quot;London&quot; id=&quot;2_2&quot;>London</OPTION>
<OPTION VALUE=&quot;Florence&quot; id=&quot;2_3&quot;>Florence</OPTION>
<OPTION VALUE=&quot;Amsterdam&quot; id=&quot;2_4&quot;>Amsterdam</OPTION>
</OPTGROUP>

<OPTGROUP LABEL=&quot;Adventure Travel&quot; id=&quot;og3&quot;>
<OPTION VALUE=&quot;Amazon&quot; id=&quot;3_1&quot;>Amazon Jungle</OPTION>
<OPTION VALUE=&quot;Kenya&quot; id=&quot;3_2&quot;>Kenyan Safari</OPTION>
<OPTION VALUE=&quot;Outback&quot; id=&quot;3_3&quot;>Australian Outback</OPTION>
<OPTION VALUE=&quot;Galapagos&quot; id=&quot;3_4&quot;>Galapagos Cruise</OPTION>
</OPTGROUP>

<OPTION id=&quot;op1&quot;>Other</OPTION>

</SELECT>
<input type=button onClick=&quot;document.getElementById('og1').style.backgroundColor='yellow'&quot; value=&quot;Yellow&quot;>
<input type=button onClick=&quot;addCity()&quot; value=&quot;Add City&quot;>
<input type=button onClick=&quot;addGroup()&quot; value=&quot;Add Group&quot;>
<script>
theSelect = document.getElementById(&quot;mySelect&quot

function addCity(){
theGroup = document.getElementById(&quot;og2&quot
newOpt = document.createElement(&quot;option&quot
newOpt.innerHTML = &quot;Vienna&quot;
newOpt.value=&quot;Vienna&quot;
newOpt.id = &quot;2_5&quot;
theGroup.appendChild(newOpt)
}

function addGroup(){
newGroup = document.createElement(&quot;optgroup&quot
newGroup.id = &quot;og4&quot;
newGroup.label = &quot;Ski Resorts&quot;
newOpt = document.createElement(&quot;option&quot
newOpt.innerHTML = &quot;Vale&quot;
newOpt.value=&quot;Vale&quot;
newOpt.id = &quot;4_1&quot;
theSelect.appendChild(newGroup)
newGroup.appendChild(newOpt)
}

function showInfo(info){
theDiv = document.getElementById(&quot;infoDiv&quot
theDiv.innerHTML = info
}
</script>
<div id=&quot;infoDiv&quot;></div>


Programming today is a race between software engineers striving to build better and bigger idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning. - Rick Cook (No, I'm not Rick)

 

[PepperPepsi]

Hi,

actually for old browser like IE 4, you can try this..

<form name=&quot;myForm&quot;>
<select name=&quot;mySelect&quot;>
<option>Blue Color Text
<option>Red Color Text
<option>Silver background
</select>
</form>

<SCRIPT>
document.myForm.mySelect.options[0].style.color='blue';
document.myForm.mySelect.options[1].style.color='red';
document.myForm.mySelect.options[3].style.backgroundColor='silver';
</SCRIPT>


hope this helps,

Chiu