Как получить значение списка 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

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

Answer 3

Я не 100% уверен, что инлайн фреймов, но вы могли бы просто использовать

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

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

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>