CODEWITHSUNDEEP
javascriptdrop-down-menuhyperlink
paperfairy
paperfairy

Reputation: 57

using dropdown menu to open background links

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?

Upvotes: 1

Views: 289

Answers (3)

Michal
Michal

Reputation: 13639

in your js

function loadWindow(){
var urls = ["Please select","http://myurl.com/special.htm", "http://myurl2.com/physical.htm", "http://myurl3.com/status.htm"];

 var i = document.PA.selectedIndex 
if (i>0){
window.open(urls[i]);
}
}

in your html

<select name="PA" onchange="loadWindow()">

Upvotes: 0

Ronnie
Ronnie

Reputation: 670

If I understand what you are asking, I think you are looking for the onchange attribute on your select box. Have a look at the on change attribute You can run any javascript function you want when the event is fired. 

<select id="PA" name="PA" onchange="javascript:OpenUrl()">

Then in your OpenUrl function, you determine what item was selected and open the appropriate url.

EDIT

Your Open Url Function would look as follows..

function OpenUrl(){
    var e = document.getElementById("PA");
    var strValue = e.options[e.selectedIndex].value;
    if (strValue == "1"){
        // Open Appropiate Url
        window.open ("http://www.myurl/special","mywindow");
    }
    else if (strValue == "2"){
        window.open ("http://www.myurl/physical", "mywindow");
    }
    else if (strValue == "3"){
        window.open ("http://www.myurl/status", "mywindow");
    }
}

Each if / else if block opens its own url. This way each option can open its own url. How exactly are you trying to open the urls? In my example, I show how you would open the url in a new window. If this is not what you are after, you will have to change the code inside each if block.

Upvotes: 1

fsong
fsong

Reputation: 666

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.

Upvotes: 1

Related Questions