www.webdeveloper.com
Results 1 to 10 of 10

Thread: Select & Onchange

  1. #1
    Join Date
    Mar 2004
    Posts
    2

    Question Select & Onchange

    Hi All,
    I need a very simple menu that allow users to select a list of selection and then once they click on any of item, it will bring them to a pre-hardcoded site for relevant report. can this be achieved using just HTML and Javascript

    eg.
    Product Category
    ---> Wood
    ---> Metal
    ---> Grass

    I have browsed this forum and managed to find some useful information on "Select and Link without pressing Go button". I have tested and it worked fine BUT i
    have a little issue here. With On change, it wouldn't work unless the value change in the dropdown list. For example, in order to jump to Wook category, i have to click on Metal and then click on Wood again. Is there any command that can helps to avoid this??



    thanks.
    TLL

  2. #2
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    This should do what you want, by default the select box will have a value of "Please Select A Location".

    Code:
    function move(sel){
    
    location.href=sel.options[sel.selectedIndex].value
    
    }
    
    //--></script>
    
    </head>
    
    <body>
    
    <form action="#">
    
    <select onchange="move(this)">
    <option value="#">Please Select A Location</option>
    <option value="wood.html">---> Wood</option>
    <option value="metal.html">---> Metal</option>
    <option value="grass.html">---> Grass</option>
    </select>
    
    </form>
    Every fight is a food fight when you’re a cannibal.

  3. #3
    Join Date
    Mar 2004
    Posts
    2

    Thanks

    hi,
    Thanks for your reply. i did found a similar code in js forum.
    <td>
    <select onchange="if(selectedIndex != 0) location = options[selectedIndex].value;">
    <option>&lt; select an option &gt;</option>
    <option value="http://...wood.html">wood</option>
    <option value="http://...metal.html">metal</option>
    <option value="http://...glass.html">glass</option>
    </select>
    </td>

    BUT, i still have one issue. In First page, it works fine, when i click on Wood and it jumped to the new page. The same thing happened when i branch back from Wood page to this page. As Wood is still selected in the drop down list, when i click again on wood, it didn't trigger the onchange event, therefore it didn't jump there. How can i set the default to 'select and option' everytime when i branch out or in from other page to this page ?

    thanks in advance

  4. #4
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    Code:
    <select onchange="if(selectedIndex != 0) location = options[selectedIndex].value; options[0].selected">


    Think this will work? (otherwise maybe...: selected=true)

    JayDie

  5. #5
    Join Date
    Oct 2003
    Location
    South Africa
    Posts
    2

    Thumbs up

    This works:

    <body onLoad="document.form1.items.selectedIndex.value=0;">

    <form name="form1">

    <select name="items" onchange="if(selectedIndex != 0) location = options[selectedIndex].value;">
    <option value="">&lt; select an option &gt;</option>
    <option value="wood.html">Wood</option>
    <option value="metal.html">Metal</option>
    <option value="glass.html">Glass</option>
    </select>

    </form>

    </body>

  6. #6
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    Now it's only 'onLoad'. But he means that when you choose in the dropdown option 2, window will open/show, you choose again option 2 (no change) nothing will happen.

    So, if you set the selected on 0 after you've choosen something and it opens somewhere, the option is choosen again when he choose the same. And... onchange when option = 0 nothing happens...

    JayDie

  7. #7
    Join Date
    Jan 2004
    Location
    Alabama, United States
    Posts
    833
    No, I believe Charles has it right. If the selected index of the dropdown is thrown back to 0 on pageload, then you should be able to click anything in the dropdown to get the effect.

    It also sounds like TLL is using frames. Don't. Not all browsers support them, and Search Engines wont index them, or will incorrectly.
    Last edited by PhillMc; 03-09-2004 at 11:09 AM.

  8. #8
    Join Date
    Dec 2002
    Location
    Manchester, UK
    Posts
    6,276
    Originally posted by Charles Olivier
    This works
    I tried it out and it doesn't seem to, so I've made a couple of refinements:

    Code:
    <body onload="document.form1.items.selectedIndex=0;">
    
    <form name="form1" action="#">
    
    <select name="items" onchange="if(this.selectedIndex > 0){location.href = this.options[this.selectedIndex].value;}">
    <option value="#">Select An Option</option>
    <option value="wood.html">---&gt; Wood</option>
    <option value="metal.html">---&gt; Metal</option>
    <option value="glass.html">---&gt; Glass</option>
    </select>
    
    </form>
    
    </body>
    I tried to remove as much JavaScript as possible from the HTML but it looks as though the current trend is to leave it in.

    The problem with this (if you can call it that) is that if some images get reloaded when the user goes back to this page then it will wait for the page to finish loading again until the reset kicks in.
    Every fight is a food fight when you’re a cannibal.

  9. #9
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257
    It also sounds like TLL is using frames. Don't. Not all browsers support them, and Search Engines wont index them, or will incorrectly.
    So... using IFrames instead or what?

    JayDie

  10. #10
    Join Date
    Mar 2004
    Location
    Netherlands
    Posts
    257

    Question

    Huh? Check the previous post of myself...

    So... using IFrames instead or what?
    JayDie

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles