Question

I’m a little new to Javascript. I don’t know the name of what I’m trying to accomplish, so I’m hoping you can all point me in the right direction.

I have a drop down menu as follows:

<select name="PA" disabled="disabled">
                    <option value="0" selected="selected">
                       --
                    </option>
                    <option value="2">
                       Physical
                    </option>
                    <option value="1">
                       Special
                    </option>
                    <option value="3">
                       Status
                    </option>
                 </select>

Depending on what I select, 2, 1 or 3 is loaded into a formula and that works just fine.

However, when users select one of three options, I want a URL on a different site to open up. The problem is, the URLs are not as simple as site.com/1.html – rather, choosing the option “Physical” should load 2 into the aforementioned formula and I would like it to open site.com/physical in the background.

I realize you can’t set two values to the same option, so my thought was a function that translated the 2 using an array into the word I wanted, then loading that word into the URL switcher.

Could somebody point me in the correct direction for something like that?

Answer 1

You can set the onchange attribute of the “select” element with a string. When the user changes their selection in the “select” element, your internet browser will run this through its Javascript interpreter.

So to implement your idea, you can do the following:

    <script>
        function openPopup(val) {
            window.open("http://www.example.com/" + val);
        }
    </script>
    <select name="PA" onchange="openPopup(this.options[this.selectedIndex])">
        <option value="0" selected="selected">
           --
        </option>
        <option value="1" >
           Special
        </option>
        <option value="2">
           Physical
        </option>
        <option value="3">
           Status
        </option>
     </select>

Just to repeat myself, the onchange attribute of the “select” element is set to the string “openPopup(this.options[this.selectedIndex])” which is put through the Javascript interpreter when someone selects an option in the drop down.