Droplist

[Linda]

Is there a way to have a blank line between each
<option>My Line</option>?

I have tried a <br> and <hr color="white"> and neither work.

Linda

 

[Andy]

Is there a way to have a blank line between each
<option>My Line</option>?

I have tried a <br> and <hr color="white"> and neither work.

Linda

Hi Linda,

This is how I do it...

<select>
<option>Red T-Shirt Small</option>
<option>Red T-Shirt Medium</option>
<option>Red T-Shirt Large</option>
<option>
<option>Green T-Shirt Small</option>
<option>Green T-Shirt Medium</option>
<option>Green T-Shirt Large</option>
<option>
<option>Blue T-Shirt Small</option>
<option>Blue T-Shirt Medium</option>
<option>Blue T-Shirt Large</option>
</select>

....this will put a blank line between the red, green and blue t-shirts in
the dropdown options list.

If you wanna finish it off a bit you could do this...

<select id="t-shirts" onChange="testforspace('t-shirts')">
<option>Red T-Shirt Small</option>
<option>Red T-Shirt Medium</option>
<option>Red T-Shirt Large</option>
<option>
<option>Green T-Shirt Small</option>
<option>Green T-Shirt Medium</option>
<option>Green T-Shirt Large</option>
<option>
<option>Blue T-Shirt Small</option>
<option>Blue T-Shirt Medium</option>
<option>Blue T-Shirt Large</option>
</select>

<script>
function testforspace(combo_id){
var spacertest =
document.getElementById(combo_id).options[document.getElementById(combo_id).options.selectedIndex].innerHTML;
if (spacertest==''){
alert('Please select a valid option from the dropdown menu list');
}
}
</script>

Hope this helps


Andy

 

[Jonathan N. Little]

Hi Linda,

This is how I do it...

<select>
<option>Red T-Shirt Small</option>
<option>Red T-Shirt Medium</option>
<option>Red T-Shirt Large</option>
<option>
<option>Green T-Shirt Small</option>
<option>Green T-Shirt Medium</option>
<option>Green T-Shirt Large</option>
<option>
<option>Blue T-Shirt Small</option>
<option>Blue T-Shirt Medium</option>
<option>Blue T-Shirt Large</option>
</select>

Actually for that case OPTGROUP would serve the purpose semantically

<select name="t-shirts">
<optgroup label="Red T-Shirt">
<option value="redsm">Red T-Shirt Small</option>
<option value="redmd">Red T-Shirt Medium</option>
<option value="redlg">Red T-Shirt Large</option>
</optgroup>
<optgroup label="Green T-Shirt">
<option value="grnsm">Green T-Shirt Small</option>
<option value="grnmd">Green T-Shirt Medium</option>
<option value="grnlg">Green T-Shirt Large</option>
</optgroup>
<optgroup label="Blue T-Shirt">
<option value="blusm">Blue T-Shirt Small</option>
<option value="blumd">Blue T-Shirt Medium</option>
<option value="blulg">Blue T-Shirt Large</option>
</optgroup>
</select>