Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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!

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    you need a double combo script that could be found in many javascript sites if you only search for them.

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks so much!

    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????

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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
    }

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks!

    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!

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    i meant next for loop statement.
    look at the whole function and my previous post.

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Posts
    317
    Thanks
    0
    Thanked 0 Times in 0 Posts

    thanks!

    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
    }
    //-->

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,965
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •