HTML drop down list output multiline - html

Question

Can any one tell me how I can get the output of a dropdown to be more than one line?
I have an array that has a list of names and against each name a list of there children for example
I want users to be able to through the drop down list select a name and then it displays a list of there children
<form name="form" onsubmit="CheckForm()">
<select name="myOptions" onchange="document.form.showValue.value=this.value">
<option value="">Select a link</option>
<option value="Link1","link2">Description1</option>
<option value="Link2">Description3</option>
<option value="Link3">Description3</option>
<option value="Link4">Description4</option>
</select>
<input type="text" name="showValue">
</form>
I wanted to give more of an example of what I am after. So I have the following lists :
Cars = Ford,Dodge,Fiat
Fruits = Apple Banana, Orange
Colours = red, orange, green
I want a drop down list from which i can pick "cars","fruits","Colours". When one is picked in the drop down the results appear as a list in a right hand pane.
So i am not looking for multiply levels of drop-down lists, just a single dropdown, but where in the HTML the value is a single word, i want the value to be a list of words.

Answer 1

You should probably change your input to a textarea as text inputs are inherently 1 line. Also your option values have to be a single value, so you can do something like the following where I've put your Link1 and Link2 in the value for Description 1 and separated them with
Line Feed and 
 Carriage Return in order to put them on different lines in the text area.
Of course you could also use a value like value="Link1,Link2 and use the replace method in javascript to swap out the comma for the line feed and carriage return if you wish.
select,
textarea {
vertical-align:top;
}
<form name="form" onsubmit="CheckForm()">
<select name="myOptions" onchange="document.form.showValue.value=this.value;">
<option value="">Select a link</option>
<option value="Link1
link2">Description1</option>
<option value="Link2">Description3</option>
<option value="Link3">Description3</option>
<option value="Link4">Description4</option>
</select>
<textarea name="showValue"></textarea>
</form>
Or if I misunderstood and you just want a comma separated list of words to appear in your text input without them being on different lines, then just alter your original code, and change that first option to:
<option value="Link1,link2">Description1</option>

Answer 2

You could use a dropdown in a dropdown in bootstrap.
here is a link to a post where the author does the same thing.
It's basicly a list in a list, you no longer use select options.
Make sure you have bootstrap imported in your HTML and it should work.
To get the value of the dropdown, simply use Jquery to go through each <li> and check for the selected one.
Hopes it helps !
Nic