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

Creating a dropdown list with hyperlinked items in an array

本文关键字：下拉列表 超链接 包含 数组 创建      更新时间：2023-09-26

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

您必须编写如下代码:

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

我认为这是正确的做法:

<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);">


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

相关文章：