所以,我拼凑了一些教程来做到这一点,我已经搜索了几个小时,但还没有找到一个例子,或者如果它可能单独使用 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>
谢谢