如何通过Javascript获取html List值?

时间:2009-05-24 05:29:09

标签: javascript html javascript-events

我正在尝试从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()”来获取列表中的值?

4 个答案:

答案 0 :(得分:4)

你在这里弄错了几件事。

  1. HTML列表项(<li>)没有值
  2. HTML列表没有“选定项目”
  3. 您无法通过致电getElementById()
  4. 获取任何“已选择”商品

    这是我的替代建议:

    <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 Transitional之外,还可以在没有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> 
    

答案 1 :(得分:1)

我对内联iframe不是100%肯定,但你可以简单地使用

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

这不是有效的html 4严格,但在过渡时有效,无论如何都适用于所有浏览器。

答案 2 :(得分:1)

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>

答案 3 :(得分:0)

你会把它放在锚标签上,因为我认为这就是你点击的内容。