Javascriptでhtml Listの値を取得するには？

Question

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

ここで、リストから値を取得するためにonClick = "changeList（）"を使用しますか？

Answer 1

ここでいくつかの問題が発生します。

1. HTMLリスト項目（<li>）が値を持たない
2. HTMLリストには、 "選択項目" あなたはgetElementById()

を呼び出すことにより、任意の "選択" の項目を取得することはできません

を持っていません私の代わりの提案は次のとおりです。

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

思考：JavaScriptが無効になっている場合は、それでもなお（無礼に）働く。この関数はfalseを返します。したがって、JavaScriptが有効になっているときにリンクをクリックすると、hrefナビゲーションがキャンセルされます。

HTML 4.01までの移行で、JavaScriptなしで完全に行うことも可能です。フレーム名が十分であるとtarget属性：それはポイントで、

<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

あなたがクリックしていると仮定して、これをアンカータグに配置します。

Answer 3

は、私は、インラインのiframe約100％はよく分からないが、あなたは、単にこれは有効なHTML 4厳密ではなく、過渡的に有効であるとにかかわらず、すべてのブラウザで動作します

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

使用することができます。

Answer 4

liは、属性値を持っていますが、値は整数でなければなりません：

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