Connecting Tech Pros Worldwide Forums | Help | Site Map

select of select box will select multiple in another box

palmiere
Guest
 
Posts: n/a
#1: Jul 20 '05
Im trying to do the following:

I have 2 select boxes, both are pre populated with data. The first box
is a single select box, the 2nd is a multiple select box. Depending on
the 1st selection, I want to have multiple values in the second select
box highlighted.

ie
box 1
<select name=type>
<option> warm colors
<option> cool colors
<option> shades of grey
</select>

box 2
<select name=colors multiple>
<option> red
<option> orange
<option> yellow
<option> blue
<option> green
</select>

If the user would select warm colors from box 1, red, orange and
yellow would be highlighted for them. Any suggestions? Thanks.

Erwin Moller
Guest
 
Posts: n/a
#2: Jul 20 '05

re: select of select box will select multiple in another box


palmiere wrote:
[color=blue]
> Im trying to do the following:
>
> I have 2 select boxes, both are pre populated with data. The first box
> is a single select box, the 2nd is a multiple select box. Depending on
> the 1st selection, I want to have multiple values in the second select
> box highlighted.
>
> ie
> box 1
> <select name=type>
> <option> warm colors
> <option> cool colors
> <option> shades of grey
> </select>
>
> box 2
> <select name=colors multiple>
> <option> red
> <option> orange
> <option> yellow
> <option> blue
> <option> green
> </select>
>
> If the user would select warm colors from box 1, red, orange and
> yellow would be highlighted for them. Any suggestions? Thanks.[/color]


Hi, it is actually not difficult.
Here is a piece of old examplecode to get you going:

<html>
<head>
<title> titel </title>
<script type="text/javascript">

function setme(num)
{
document.forms.aform.fruit.selectedIndex = num;
}

</script>
</head>

<body>

<form name="aform">

<select name="fruit">
<option value="bananas">bananas</option>
<option value="kokos">kokos</option>
<option value="apple">apple</option>
</select>
<input type=submit >
</form>

<p>
<a href="javascript:setme(0);">set bananas</a><p>
<a href="javascript:setme(1);">set kokos</a><p>
<a href="javascript:setme(2);">set apple</a><p>
</body>
</html>



Regards,
Erwin Moller
Closed Thread