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
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation help with dropdown list

    Hello everyone
    I am new to javaScript but not new to programming. I have a drop down list box that i am trying to select information from. Each entry in the list has a value that is set to a URL. I then have a push button that i have put a java script function in the onClick event of the button. What i want it to do then is get the url value of the selectedIndex of the list and activate that page. Below is the code that i have but i cannot get it to load the new url page. Can someone help me out? I was following a "tutorial" from javascriptkit.com to get this far but the code from the site must be messed up. Thanks in advance for any help you can give me.

    Code:
    <form name="DropDown1">
    <p><select name="example" size="1">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    </select></p>
    
    <input type="button" name="ListTest" value="List Test" onclick="play()">
    </form>
    
    <script type="text/javascript">
    <!--
    function play()
    {
       location=document.DropDown1.example.options
    	[document.DropDown1.example.options.selectedIndex].value)
    }
    //-->
    </script>

  • #2
    New Coder
    Join Date
    Dec 2005
    Posts
    88
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This

    location=document.DropDown1.example.options
    [document.DropDown1.example.options.selectedIndex].value


    should be

    window.location.href=document.DropDown1.example.options
    [document.DropDown1.example.options.selectedIndex].value;

    That is, if you want to change the location of the entire page. IF you want to load that page into an iframe or something then give the iframe and ID, such as 'selectFrame':

    id="selectFrame"

    and then just do:

    document.getElementById('selectFrame').src= document.DropDown1.example.options
    [document.DropDown1.example.options.selectedIndex].value;

  • #3
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ahh thanks konithomimo. Following your advice i was able to figure out exactly what i was doing wrong. In my function code at the end of the line i had a ")" and it was messing up the function call. Using the following line of code works perfectly:

    Code:
    location=document.DropDown1.example.options
    	[document.DropDown1.example.options.selectedIndex].value
    It seems to work even if i do not put the window.location.href information in there. What i had before had a ')' after the word value. Thanks for your help!

    Perhaps you could help me next by telling me how to get an event to happen once you select something from the list instead of selecting something from the list and then having to press a button? For instance, using the previous list box i select Google and as soon as i select it, the page is changed to the url for the selection i chose, which would be www.google.com in this case. Is there some event that happens when you select an item in the list like the onClick event for the push button?
    Last edited by CodeGnome; 12-28-2005 at 08:51 PM.

  • #4
    New Coder
    Join Date
    Dec 2004
    Posts
    81
    Thanks
    0
    Thanked 0 Times in 0 Posts
    These do not require the separate function.
    One with a button, the other uses the onChange handler.

    -Bill

    Code:
    <form name="DropDown1"><p>
    <select name="example1" size="1" onChange="window.open(this.options[this.selectedIndex].value,'_blank')">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    </select>
    
    <br><br><br><br>
    <select name="example2" size="1">
    <option value="http://www.google.com">Google</option>
    <option value="http://www.yahoo.com">Yahoo</option>
    </select>
    
    <br>
    <input type="button" name="ListTest" 
    value="List Test" onClick="window.open(example2.options[example2.selectedIndex].value,'_blank')">
    </form>
    Last edited by cyber11; 12-28-2005 at 09:39 PM.

  • #5
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That is great! Thanks cyber11! I knew there had to be one since i had seen it used like that on websites. I just couldn't figure out the event to use and how to use it.

    I thought at first it wasn't working but i was just typing too fast. :lol:
    Last edited by CodeGnome; 12-28-2005 at 09:20 PM.

  • #6
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Just curious cyber11 but what does the '_blank' do for the function? I removed it and it appeared to work the same. Can you give me some insight on what it does and what the paramater for the function is supposed to do? Thanks for your help too.

  • #7
    New Coder
    Join Date
    Dec 2004
    Posts
    81
    Thanks
    0
    Thanked 0 Times in 0 Posts
    CodeGnome-
    Can you give me some insight on what it does and what the paramater for the function is supposed to do?
    Good question.
    It does nothing and I should have noticed it yesterday.
    I just did a cut and paste as the page it came from is about 2 years old and at some point I was probably trying something and forgot to remove it.
    It was the second parameter in a function call to some larger script. But looking at it now I can't imagine what.

    -Bill

  • #8
    New to the CF scene
    Join Date
    Dec 2005
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <lol> I have had that happen to me several times. Thanks again for your help.


  •  

    Posting Permissions

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