Création d'une liste déroulante avec des éléments en lien hypertexte dans un tableau

Je suis très nouveau à JS, alors pardonnez la simplicité de cette question ... Essayer de créer une liste déroulante avec des éléments hyperliés en utilisant un tableau. Le produit final aura des centaines d'entrées, il est donc important de gagner de la place. Deux choses à garder à l'esprit: je ne peux pas utiliser JQuery et je dois l'intégrer dans WordPress. Je sais que je fais cela de manière incorrecte, mais le code ci-dessous devrait donner une idée précise de ce que j'essaie de faire. Toute aide très appréciée.Création d'une liste déroulante avec des éléments en lien hypertexte dans un tableau

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

Source

2015-09-25 friendofdog

Vous devez écrire le code comme ci-dessous:

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

Source

2015-09-25 05:14:05

Ca y est! Merci beaucoup. – friendofdog

Je l'ai fait upvote mais aujourd'hui est en fait ma première journée en utilisant ce forum. Je suis informé que j'ai besoin de 15 points de réputation avant que mon vote ne soit compté. – friendofdog

Montre comment je suis nouveau ... Fait – friendofdog

Je pense que cela est la bonne façon de le faire:

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

est ici http://jsfiddle.net/fvjeunbu/

Si vous souhaitez rediriger lorsque l'utilisateur de sélectionner une option, puis la déclaration de sélection doit être:

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

Source

2015-09-25 05:04:11

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

Source

2015-09-25 09:56:59

Une réponse plus explicative sera très appréciée. – vivekkupadhyay

Création d'une liste déroulante avec des éléments en lien hypertexte dans un tableau

Répondre

Questions connexes