Хорошо, я успешно выполнил свою задачу, используя кнопки, которые были просто тестом.Моя настоящая цель - динамически изменять innerHTML в DIV, основываясь на параметре, выбранном в раскрывающемся меню.Однако выгода заключается в том, что это ДОЛЖНО быть сделано с использованием уникального идентификатора каждого пункта меню.Он НЕ МОЖЕТ работать, используя значение каждого пункта меню, так как это значение используется совершенно другим скриптом, который работает (на данный момент).
У меня есть рабочий пример с использованием кнопок, а также отбрасываниеменю, но раскрывающееся меню работает только в этом примере, потому что я использую отдельную функцию для каждого параметра списка.Когда он будет запущен, у меня будет два выпадающих меню, которые будут содержать несколько десятков элементов, поэтому написание функции для каждого элемента будет трудоемким и не очень практичным для производства.
Вот рабочий пример:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sandbox 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#content {
display: block;
width: 50%;
height: 300px;
border: 1px solid blue;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<script type="text/javascript">
function innerHTML1()
{
document.getElementById('content').innerHTML = '<iframe src="http://www.google.ca" width="100%" height="100%" frameborder="no"></iframe>';
}
function innerHTML2()
{
document.getElementById('content').innerHTML = '<iframe src="http://www.msn.ca" width="100%" height="100%" frameborder="no"></iframe>';
}
</script>
<div id="content"></div><br />
<input type="button" onclick="innerHTML1()" value="open Google" />
<p>
<input type="button" onclick="innerHTML2()" value="open MSN" />
</p>
<p>
<select>
<option value="">select an option...</option>
<option value="" onClick="innerHTML1()">open Google</option>
<option value="" onClick="innerHTML2()">open MSN</option>
</select>
</p>
</body>
</html>
Так что вышеприведенный пример, кажется, отлично работает, но это потому, что он использует две функции, по одной для каждого времени меню.
Итак, вот что у меня есть и естьВ чем мне нужна помощь:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>sandbox 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#content {
display: block;
width: 50%;
height: 300px;
border: 1px solid blue;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
#contentarea {
display: block;
width: 50%;
height: 300px;
border: 1px solid blue;
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
</head>
<body>
</style>
<script type="text/javascript">
function changeContent()
{
var newContent = document.getElementById('selection');
var ContentInfo = newContent.selectedIndex;
newContent.value = newContent.options[ContentInfo].id;
document.getElementById('content').innerHTML = newContent;
}
</script>
<div id="content"></div>
<p>
<select id="selection" onchange="JavaScript:changeContent()">
<option value="" id="" selected="selected">Select a website to load in the DIV..</option>
<option value="Page1" id="Page1.html">Page1</option>
<option value="Page2" id="Page2.html">Page2</option>
<option value="Page3" id="Page3.html">Page3</option>
<option value="Page4" id="Page4.html">Page4</option>
</select>
</p>
<p>
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var PageList = document.getElementById('Pages');
var displayPage = document.getElementById('contentarea');
var NewPage = PageList.selectedIndex;
displayPage.value = PageList.options[NewPage].id;
document.getElementById('contentarea').innerHTML = displayPage;
}
//-->
</script>
<select id="Pages" onchange="showSelected()";>
<option selected="selected" value="" id="">Select a website to load in the DIV..</option>
<option value="" id="Page1.html">Page 1</option>
<option value="" id="Page2.html">Page 2</option>
<option value="" id="Page3.html">Page 3</option>
<option value="" id="Page4.html">Page 4</option>
</select>
</p>
<div id="contentarea"></div>
</body>
</html>
Первое, на что нужно обратить внимание, это то, что я пытался написать скрипт двумя разными способами, каждый из которых представлял свою собственную уникальную ошибку.Я не знаю, какой из них ближе к правильному ответу или нет, поэтому я представляю оба в своем вопросе.В верхнем окне DIV отображается [object HTMLSelectElement], и элементы в раскрывающемся меню исчезают.В нижнем окне DIV отображается [object HTMLDivElement], но выпадающее меню кажется невредимым.
Второе, на что следует обратить внимание, это то, что я новичок в JavaScript.(в случае, если вы еще не заметили)
В-третьих, я уже понимаю, что это не сработает, просто введя теги <iframe> в раздел ID каждого <option>.и даже если бы это было так, это было бы не очень практично.В сценарий я хочу добавить что-то вроде:
<script language="JavaScript" type="text/javascript">
<!--
function showSelected()
{
var PageList = document.getElementById('Pages');
var displayPage = document.getElementById('contentarea');
var NewPage = PageList.selectedIndex;
displayPage.value = PageList.options[NewPage].id;
document.getElementById('contentarea').innerHTML = displayPage;
innerHTML = '<iframe src="+ displayPage +" width="100%" height="100%" frameborder="no"></iframe>';
}
//-->
</script>
... или что-то в этом роде.Итак, еще раз ...
-I'm loading an iFrame inside a DIV.
-The content of the DIV will change depending on what item in a dropdown menu is selected (must execute using onChange)
-The value of the `<option>` cannot be used for this solution, as value is being used for another script. The script must work using the id of each `<option>`
-Writing a seperate function for every `<option>` works, but isn't very practical.
-I fail at javascript ;)
Большое спасибо заранее за любую помощь, которую вы можете предложить.