0
これで単なるテストだったボタンを使って目標を達成できました。私の本当の目標は、ドロップダウンメニューで選択したオプションに基づいて、DIV内のinnerHTMLを動的に変更することです。ただし、キャッチは各メニュー項目の一意のIDを使用して行う必要があります。その値は、（今のところ）働いているまったく異なるスクリプトによって利用されているので、各メニュー項目の値を使用しても機能しません。onChangeを使用したドロップダウンメニューの選択に基づいてDIV内のinnerHTMLをロード
ボタンとドロップダウンメニューを使用した実例がありますが、ドロップダウンメニューは各リストオプションごとに別々の関数を使用しているため、この例でのみ機能します。これがライブになると、数十のアイテムを含む2つのドロップダウンメニューが表示されるので、すべてのアイテムに関数を書くのは時間がかかり、生産にはあまり実用的ではありません。ここで
は実施例である：
<!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>
は、したがって、上記の例では、仕事の罰金を行うようだが、その2つの機能を、各メニューの時間のための1つを使用しているためです。だからここ
は、私がこれまで持っているものであると私は助けを必要とするものである：私は両方独自のエラーを提示し、2種類の方法でスクリプトを書いてみましたということであると指摘し
<!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]が表示されますが、ドロップダウンメニューには何も表示されません。
2番目の点は、完全なjavascript newbです。 （あなたがまだ気づいていない場合）
3番目の点は、すべて<option>のIDセクションにタグを入力するだけで、これが機能しないことをすでに認識していることです。それはあまり実用的ではないでしょう。このスクリプトでは、次のようなものを追加したいと考えています。
<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 ;)
ありがとうございました。ご協力いただけると助かります。
パーフェクト！マークアップからデータを引き出してコードに入力するのは、私が必要としていたものでした。これは素晴らしいことです！ありがとうございます=） – abracassabra
@Lord Tubington - クールで、喜んで助けてください。私の答えを受け入れることを自由に感じてください（答えの隣に表示されるチェックボックスをクリックすると緑色に変わります;私はそれらの回答点を得なければなりません。 ...） – nnnnnn