Как получить значение списка HTML через Javascript?

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 нет «выбранного элемента»
3. вы не можете получить «выбранный» предмет, позвонив по номеру 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 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> 

Answer 2

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>

Answer 3

Я не уверен на 100% по поводу встроенных фреймов, но вы можете просто использовать

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

Это не действительно html 4 строго, но действует с переходной и работает во всех браузерах независимо от *. 1004 *

Answer 4

Вы бы поместили это в тег привязки, так как я предполагаю, что это то, что вы нажимаете.