javascript下拉选择选项而不是文本

时间:2013-09-07 04:57:12

标签: javascript arrays image select options

所以,我已经拼凑了一些教程来实现这一目标,我已经搜索了几个小时,还没有找到一个例子,或者它是否可以单独使用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>

由于

0 个答案:

没有答案