Question

我是JS的新手，所以请原谅这个问题的简单性......尝试使用数组创建一个包含超链接项的下拉列表。最终产品将有数百个条目，因此节省空间非常重要。

要记住两件事：我不能使用JQuery，我必须将它集成到WordPress中。

我知道我这样做不正确，但下面的代码应准确了解我正在尝试做什么。任何帮助非常感谢。

<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/

Answer 1

我认为这是正确的方法：

<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>

这是http://jsfiddle.net/fvjeunbu/

如果要在用户选择选项时重定向，则选择声明应为：

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

Answer 2

您必须编写如下代码：

<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>

Answer 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>

创建包含数组中超链接项的下拉列表

3 个答案: