Have Geek Brain

How do I get the value of a html list via Javascript?

I am trying to get values ​​from a html list <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;
}

Where would I put onClick = "changeList ()" to get the values ​​from the list?

+1


a source to share


4 answers


You are wrong here.

  • HTML list item ( <li>

    ) doesn't matter
  • There is no "selected item" in the HTML list
  • you cannot get any "selected" item by calling getElementById()

Here's my alternative suggestion:

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


Thoughts: If JavaScript is disabled, it still works (rudimentary). The function returns false

, so when JavaScript is enabled, clicking on the link will cancel the navigation href.

Note that prior to HTML 4.01 Transitional, this can be done without JavaScript. The attribute target

with the name of the frame is enough:

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


a source


I'm not 100% sure about inline iframes, but you can just use

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


This is not valid html 4 strict but valid with transient code and works in all browsers regardless.

+1


a source


li

has an attribute value, but the value must be an integer, that is, a dot:

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


a source


You put this in an anchor tag as I am assuming this is what you click.

0


a source






More articles:


All Articles