Comment obtenir la valeur html List via Javascript?

Question

J'essaie d'obtenir des valeurs de la liste html <li>.

<ul> 
    <li><a>Main Menu</a> 
     <ul class="leftbutton" > 
      <li value="List1"><a>Sampe 1</a></li> 
      <li value="List2"><a>Sample 2</a></li> 
      <li value="List3"><a>Sample 3</a></li> 
      <li value="List4"><a>Sample 4</a></li> 
      <li value="List5"><a>Sample 5</a></li> 
     </ul> 
    </li> 
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

function changeList() 
{ 
    var iframe = document.getElementById("iframeid"); 
    var url = document.getElementById("selectedlist").value + ".html"; 
    iframe.src = url; 
} 

Où je mettrais onclick = "ChangeList()" pour obtenir les valeurs de la liste?

Answer 1

Vous avez plusieurs problèmes ici.

1. un élément de liste HTML (<li>) n'a pas de valeur
2. une liste HTML n'a aucun élément "élément sélectionné"
3. vous ne pouvez pas obtenir "sélectionné" en appelant getElementById()

Voici ma suggestion alternative:

<ul> 
    <li><a>Main Menu</a> 
    <ul class="leftbutton" > 
     <li><a href="List1.html" onclick="return changeList(this);">Sample 1</a></li> 
     <li><a href="List2.html" onclick="return changeList(this);">Sample 2</a></li> 
     <li><a href="List3.html" onclick="return changeList(this);">Sample 3</a></li> 
     <li><a href="List4.html" onclick="return changeList(this);">Sample 4</a></li> 
     <li><a href="List5.html" onclick="return changeList(this);">Sample 5</a></li> 
    </ul> 
    </li> 
</ul> 

<iframe id="iframeid" width="100%" height="100%" align="middle"></iframe> 

<script type="text/javascript"> 
function changeList(a) 
{ 
    var iframe = document.getElementById("iframeid"); 
    iframe.src = a.href; 
    return false; 
} 
</script> 

Réflexions: Si JavaScript est désactivé, il fonctionne toujours (rudimentarily). La fonction renvoie false, alors lorsque JavaScript est activé, un clic sur le lien annule la navigation href. Sachez que jusqu'à HTML 4.01 Transitional, il est également possible de le faire entièrement sans JavaScript. Un attribut target avec le nom du cadre est suffisant:

<ul> 
    <li><a>Main Menu</a> 
    <ul class="leftbutton" > 
     <li><a href="List1.html" target="iframename">Sample 1</a></li> 
     <li><a href="List2.html" target="iframename">Sample 2</a></li> 
     <li><a href="List3.html" target="iframename">Sample 3</a></li> 
     <li><a href="List4.html" target="iframename">Sample 4</a></li> 
     <li><a href="List5.html" target="iframename">Sample 5</a></li> 
    </ul> 
    </li> 
</ul> 

<iframe id="iframeid" name="iframename" width="100%" height="100%" align="middle"></iframe> 

Answer 2

Vous mettriez cela sur l'étiquette d'ancrage, comme je suppose que c'est ce que vous cliquez.

Answer 3

Je ne suis pas sûr à 100% iframes inline mais vous pouvez simplement utiliser

<li><a href="/path/to/html" target="myIframeId">Value</a></li> 

Ce n'est pas valide HTML 4 stricte mais est valable avec transition et fonctionne dans tous les navigateurs indépendamment.

Answer 4

li a la valeur d'attribut, mais la valeur doit être un entier, qui est le point:

   <li value="1"><a>Sampe 1</a></li> 
      <li value="2"><a>Sample 2</a></li> 
      <li value="3"><a>Sample 3</a></li> 
      <li value="4"><a>Sample 4</a></li> 
      <li value="5"><a>Sample 5</a></li>