SELECT onChange auto fill other SELECT boxes

I searched here and some other places on the net but cant find anything that suits my needs.

I have a SELECT box with 3 values


<form name="form1">
<select name="length">
	<option name="length" value="none">--Select for All--</option>
	<option name="length" value="5">--5 Days--</option>
	<option name="length" value="7">--7 Days--</option>
	<option name="length" value="10">--10 Days--</option>
</select>
</form>

OnChange, I want to invoke a function that auto populates the rest of the SELECT fields in the form. The select boxes will vary in quantity as the page is dynamic, but the values are always the same (like the code above).

Does this make sense?

The closest example I can find is this (with checkboxes)
http://www.js-examples.com/example/?ex=464&mode=2

Much TIA

you mean you want to select all of the options when they click the ‘all’?? You need to set some property to allow multiple ones to be selected i believe, unless i misundertood you.

Let’s say I select ‘7 Days’ from the SELECT menu. I want the rest of the SELECT boxes in the form to be populated with ‘7 Days’.

Only one can be selected at a time.

Uh…don’t you need that to be a multiple-enabled select?

<select name="length" onChange="" multiple>
...options...
</select>

also, it isn’t necessary to name all the options, and if you do you should name them all the same thing.

the number of events that work effectively on selects are few, and way fewer for options, so unless you want to add events to each option, you won’t get a whole lot fancier than this. Assuming what I’ve said above is what you are after, try something like this. Remember, the options of a select object are an array! (just like the checkboxes)

<script language="javascript">

function checkForAll(selObj)
	{
	if (selObj.options[0].selected)
		{
		for (var i=1; i<selObj.length; i++)
			selObj.options[i].selected = true;
		}
	}


</script>

<select name="length" onChange="checkForAll(this);" multiple height="4">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>

Sorry, looks like I misunderstood you. So you have multiple selects in the same form, and you want the status of one to affect all the others?

And how is the page dynamic? PHP or ASP or something?

Somehow…miraculously…i did it!


function lengthfill(){
var lengthField = StageForm.Slength.options[StageForm.Slength.selectedIndex].value;

	for (i = 0; i < StageForm.Slength2.length; i++) {
		StageForm.Slength2[i].value = lengthField;
		}

return true;
}


<form name="StageForm">
<select name="Slength" onChange="lengthfill();">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
.
.
.
<select name="Slength2">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
.
.
.
<select name="Slength2">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>


</form>

That’s an ok solution but it has two problems

1) You are hardcoding the DOM names of the FORM and the SELECT into the function. Makes it hard to reuse and/or more editing if anything ever changes.

2) You have two SELECTs in the form with the same DOM name. This is a big no no, and will probably crash most browsers, besides making it impossible to identify just one of them via any DOM structure out there.

Better use something like this:

<script language="javascript">

function setAllSelects(frm, newIndex)
	{
	for (var i=0; i<frm.elements.length.length; i++)
		if (frm.elements[i].tagName == 'SELECT')
			frm.elements[i].selectedIndex = newIndex;
	}
</script>

<form name="form1">
<select name="length" onChange="setAllSelects(this.form, this.selectedIndex);">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
<select name="length2">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
<select name="length3">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
</form>

Serious lack of dynamic population here.

what’s going on :rolleyes:

Flawless

Ohhh, I see what you are doing…but I’m not sure why you would want all the values of a select to be the same. Doesn’t that defeat the purpose of having a select?

Correct me if I’m wrong, but you want the runtime data of the selects to look like this (assuming 7 days has been selected)

<select name="length">
	<option value="none">--Select for All--</option>
	<option value="5">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="10">--10 Days--</option>
</select>
<select name="length2">
	<option value="7">--Select for All--</option>
	<option value="7">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="7">--10 Days--</option>
</select>
<select name="length3">
	<option value="7">--Select for All--</option>
	<option value="7">--5 Days--</option>
	<option value="7">--7 Days--</option>
	<option value="7">--10 Days--</option>
</select>

At least, that’s what your function looks like its doing…

You still shouldn’t hardcode the FORM/SELECT data into the function, and NEVER give two objects the same DOM name…

Let me know what’s up…I feel confused now…:smiley:

I’m using this form for a mass data upload to our eBay database. The user is going to fill out the forms and for simplicity’s sake, I wanted to make a checkbox or Select where he could select all values on that page to be the same. That should save him several minutes alone.

As for the DOM naming, I thought about that … I needed an easy way to count the number of boxes checked. So I am using ASP like so

[vbs] intItemCount = Request.Form(“sku”).Count [/vbs]
and looping through the selectde items like this:
[vbs]
for x = 1 to intItemCount

strSKU = Request.Form(“sku”)(x)

if strSKU <> “” then
'get variables
varName = Request.Form(“variable”)(x)

   update database

end if

next
[/vbs]

check out my page here for the example

http://www.penniesonthedollar.com/store/ebay/stage.asp