Creating a dropdown list with hyperlinked items in an array

0 Views

I’m very new to JS, so forgive the simplicity of this question… Trying to create a dropdown list with hyperlinked items using an array. The end product will have hundreds of entries, so it’s important to save space.

Two things to keep in mind: I can’t use JQuery and I have to integrate this in WordPress.

Read More

I know I’m doing this incorrectly, but the below code should give an accurate idea of what I’m trying to do. Any help much appreciated. 

<body>
<form id="siteList">
  <select id="selectSite">
  <option>Choose a site</option>
  </select>
</form>
</body>

</script>
var myArray = new Array("Google", "Yahoo", "Bing", "Gmail", "Facebook");

var links = new Array("http://www.google.com", "http://www.yahoo.com", "http://www.bing.com", "http://www.gmail.com", "http://www.facebook.com");

// Get dropdown element from DOM
var dropdown = document.getElementById("selectSite")

// Loop through the array
for (var i = 0; i < myArray.length; ++i) {
    // Append the element to the end of Array list
    dropdown[dropdown.length] = new Option(myArray[i].link(links[i]), myArray[i].link(links[i]));
}
</script>

http://jsfiddle.net/L2awjmvd/

Post Views: 0

Related posts

3 comments

  1. You have to write the code like below:

    <script type="text/javascript">
    function createarray() {
        var myArray = new Array("Google", "Yahoo", "Bing", "Gmail", "Facebook");
        var links = new Array("http://www.google.com", "http://www.yahoo.com", "http://www.bing.com", "http://www.gmail.com", "http://www.facebook.com");
        var dropdown = document.getElementById("selectSite");

        for (var i = 0; i < myArray.length; ++i) {
            var option = document.createElement("option");
            option.text = myArray[i];
            option.value = links[i];
            dropdown.add(option);
//          dropdown[dropdown.length] = new Option(myArray[i].link(links[i]), myArray[i].link(links[i]));
        }
    }

    function selectSiteRedirect(selectedSite) {
        window.location.href = selectedSite;
    }
</script>
<body onload="createarray();">
    <form id="siteList">
        <select id="selectSite" onchange="selectSiteRedirect(this.value);">
            <option>Choose a site</option>
        </select>
    </form>
</body>

  2. I think this is the correct way to do it: 

    <script>
var my_array = ["Google", "Yahoo", "Bing"];
var my_array_links = ["www.google.com", "www.yahoo.com", "www.bing.com"];
var select = document.getElementById("selectSite");

for (i = 0; i < my_array.length; i++) {
    var opt = document.createElement('option');
    opt.value = my_array[i];
    opt.innerHTML = my_array_links[i];
    select.appendChild(opt);
}
</script>

    Here is http://jsfiddle.net/fvjeunbu/

    If you want to redirect when the user select an option, then the select declaration should be:

    <select id="selectSite" onchange="javascript: window.location.assign(this.value);">


  3.  <script>
        function pageLoad() {
            var my_array = ["Google", "Yahoo", "Bing"];
            var my_array_links = ["www.google.com", "www.yahoo.com", "www.bing.com"];
            var select = document.getElementById("selectSite");
            for (i = 0; i < my_array.length; i++) {
                var opt = document.createElement('option');
                opt.value = my_array_links[i];
                opt.innerHTML = my_array[i];
                select.appendChild(opt);
            }
        }
        window.onload = pageLoad;
        function selectSiteRedirect(selectedSite) {
            //   window.location.href = selectedSite;
            if(selectedSite!="selected")
            window.open(selectedSite, '_blank');
        }
    </script>
    <div>
            <select id="selectSite" onchange="selectSiteRedirect(this.value)">
                <option selected="selected" value="selected">Choose a site</option>
            </select>
        </div>

Comments are closed.