所以,我已经拼凑了一些教程来实现这一目标,我已经搜索了几个小时,还没有找到一个例子,或者它是否可以单独使用JavaScript。
目前,图像根据选择“onchange”的选项而变化。我希望数组中的图像显示在下拉菜单中而不是文本中。
仅针对此问题的简化版本。选择选项1,图像将随部件号一起变化。
<script type='text/javascript'>
var numeric = [
['menu name',
'http://www.w3schools.com/images/w3html.gif',
'part #',
'http://www.w3schools.com/'],
['input2-0',
'input2-1',
'input2-2',
'input2-3'],
['input3-0',
'input3-1',
'input3-2',
'input3-3'],
['input4-0',
'input4-1',
'input4-2',
'input4-3']
];
window.onload = function () {
document.getElementById("img1").src = numeric[3][1];
document.getElementById('id_link1').firstChild.data = numeric[3][2];
document.getElementById('id_link1').href = numeric[3][3];
document.myForm.req_one.options[0] = new Option(["Please Choose"], 0);
var i = 0;
for (var i = 0; i < numeric.length; i++) {
var k = i + 1;
document.myForm.req_one.options[k] = new Option(numeric[i][0], k);
}
}
function pic1() {
var x = document.forms["myForm"]["req_one"].value;
x = x - 1;
alert(x + ". " + numeric[x][1]);
document.getElementById("img1").src = numeric[x][1];
img1.height = 75;
img1.width = 75;
document.getElementById('id_link1').firstChild.data = numeric[x][2];
document.getElementById('id_link1').href = numeric[x][3];
}
</script>
<form name="myForm">Select populated onload via Array
<br>
<select name="req_one" onchange="pic1()"></select>
</form>
<br>
<div>
<img src="" id="img1" border="0" />
</div>
由于