change the select option value once base selection

hi,

I have two Select objects -> Property and Price, whereby the price will be listed in the Price Select tag base on the property type. For example:

<select name="property" onChange="changeVal()">
<option value="SemiD"><b>Semi-D</b></option>
<option value="Bungalow"><b>Bungalow</b></option>
</select>

Below is the price avaialble for Semi Detached property
<select name="price">
<option value="1.0"><b>1.0 - 1.5 Million</b></option>
<option value="1.5"><b>1-5 - 2.0 Million</b></option>
<option value="2.0"><b>2.0 - 2.5 Million</b></option>
</select>
Below is the price available for Bangalow
<select name="price">
<option value="2.5"><b>2.5 - 3.0 Million</b></option>
<option value="3.0"><b>3.0 - 4.0 Million</b></option>
</select>

so what i want to do is once the user has select their preferer property, the price list in the price Select Tag will be showing the price accordingly.

I have tried, but failed , my code is as below:

function changeVal()
{

if (document.formreg.property.value == "SemiD")document.formreg.property.options[0] = new Option("1.0", "1.0 - 1.5 Million", false, false);
document.formreg.property.options[1] = new Option("1.5", "2.0 - 1.5 Million", false, false);
document.formreg.property.options[2] = new Option("2.0", "2.5 - 1.5 Million", false, false);
}

else
{
document.formreg.property.options[0] = new Optionnew Option("2.5", "2.5 - 3.0 Million", false, false);
document.formreg.property.options[1] = new Option("3.0", "3.0 - 4.0 Million", false, false);
document.formreg.property.options[2] = null
}

Please advice....thanks!

you need a double combo (http://javascriptkit.com/script/cut183.shtml) script that could be found in many javascript sites if you only search for them.

hi, thanks so much for ur info, I have alreday went through the script and alreday understand how does it work, but got one part I feel so confused, hope that can have your advice.

Below is the code:
-----------------------------------------------
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
------------------------------------------
I'm not really understand above code, for my understanding we can delete any option by assigning the value null to the appropriate element of the options array, the above code is used for deleting the opiton array, but why it is why it only delete the option 2 and 1 of the stages select object, how about the option for element 0????

i dont know what their purpose was, but the option 0 will be replaced by the first iteration of the next for loop anyway.

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null

for (i=0;i<group[x].length;i++){
emp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

you can also delete option 0 if you really want

function redirect(x){
for (m=temp.options.length-1;m>=0;m--)
temp.options[m]=null

for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

thanks for your reply, but I can't see the option 0 will be replaced by the first iteration of the next for loop from here

for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null

the first loop is deleting the temp.options[2] = null
and the second loop is deleting the temp.options[1] = null

please advice!

i meant next for loop statement.
look at the whole function and my previous post.

oh i see, finnaly i understand alreday, I miss interprete your statement. Anyway, just forget about it. I have another question regarding the code.

My javascript can't work, after spending some time to look at it, finnaly find out that the Javascript code ( as below), must put within the form tag, may I know WHY?? normally, the janascript code is within the head tag.
<script>
<!--

/*
Double Combo Script Credit
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScripts here!
*/

var groups=document.doublecombo.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("JavaScript Kit","http://javascriptkit.com")
group[0][1]=new Option("News.com","http://www.news.com")
group[0][2]=new Option("Wired News","http://www.wired.com")

group[1][0]=new Option("CNN","http://www.cnn.com")
group[1][1]=new Option("ABC News","http://www.abcnews.com")

group[2][0]=new Option("Hotbot","http://www.hotbot.com")
group[2][1]=new Option("Infoseek","http://www.infoseek.com")
group[2][2]=new Option("Excite","http://www.excite.com")
group[2][3]=new Option("Lycos","http://www.lycos.com")

var temp=document.doublecombo.stage2

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
}

function go(){
location=temp.options[temp.selectedIndex].value
}
//-->

it is because of this:

var groups=document.doublecombo.example.options.length
//...
//...
var temp=document.doublecombo.stage2

since they are put outside the function and access the combo boxes as the page is loaded, they need to be put below those <select> tags. you can't access elements that still does not exist.