DevilWAH DevilWAH - 3 months ago 15
HTML Question

HTML drop down list output multiline

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

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 &#10; Line Feed and &#13; 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&#13;&#10;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>