Question

我在网上找到了这个脚本。这几乎就是我所需要的。看看：

<script type="text/javascript">
    imageArray = new Array("NOimglink", "imglink", "imglink", "imglink");
    altArray = new Array("", "Red Star", "Yellow Star", "Pink Star");

    function show() {
        var Index = document.menuForm.select1.options[document.menuForm.select1.selectedIndex].value;
        var text = document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
        document.testStar.src = imageArray[Index];
        document.testStar.alt = altArray[Index];
        document.getElementById("item").innerHTML = document.getElementById("select1").value;
    }
</script>
<div id="item"></div>
<form action="../action/return.html" method="post" id="menuForm" name="menuForm">
    <select id="select1" onchange="show()" name="select1">
        <option value="0" selected="selected">Choose a color</option>
        <option value="1">Red Star</option>
        <option value="2">Yellow Star</option>
        <option value="3">Pink Star</option>
    </select>
    <img id="testStar" height="35" alt="red star" src="" width="35" border="0" name="testStar">

无论如何，除了使用所有阵列线之外还有其他方法吗？ imageArray和altArray？我有超过50个选择选项，但阵列太多了。任何更简单的方法？

Answer 1

1。）不要使用innerHTML，它是专有的Microsoft JScript方法。不，因为一些低级的眉头决定将它变成一个标准，并不意味着任何人都应该使用它。 XHTML甚至常规HTML都不是文本，它的语法。因此，当您稍后引用某个元素时，它可能会或可能不会存在，因为您可能正在引用DOM，或者您可能没有引用任何内容，因为您认为代码被转储为一堆文本。

2.）在您澄清问题后修改。

另存为 example.xhtml ，并确保使用带有这些变量名称的图像，或者将代码中的变量名称更改为您正在测试的图像的名称。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dynamic JavaScript Image Generation</title>
<script type="application/javascript">
//<![CDATA[
function change_image()
{
 var se = document.getElementById('select_image');
 var img_src = se.options[se.selectedIndex].value;
 var img_alt = se.options[se.selectedIndex].text;
 var img = document.getElementById('img_target');
 img.alt=img_alt;
 img.src=img_alt+'.png';
}
//]]>
</script>
</head>

<body>

<form action="" method="get">
<fieldset>
<label for="select_image">Select an Image</label>
<select id="select_image" onchange="change_image();">
<option value="img0">Image 0</option>
<option value="img1">Image 1</option>
<option value="img2">Image 2</option>
<option value="img3">Image 3</option>
<option value="img4">Image 4</option>
<option value="img5">Image 5</option>
</select>
</fieldset>
</form>

<div><img alt="" id="img_target" src="img0.png" /></div>

</body>
</html>

Answer 2

如果要避免所有阵列，则需要稍微修改HTML。该数组用作键值val查找，如果没有，则需要在前一个val点中设置val。也就是说，让你的option value s等于图像src：

<option value="" selected="selected">Choose a color</option>
<option value="imgLink.png">Red Star</option>
<option value="imgLink2.png">Yellow Star</option>
<option value="img3.jpg">Pink Star</option>

现在将option value设置为新的src并使用option text作为替代文字就可以了。

function show() {
    var elemSel = document.getElementById('select1'),
        testStar = document.getElementById("testStar"),
        newSrc = elemSel.options[ elemSel.selectedIndex ].value,
        newAlt = elemSel.options[ elemSel.selectedIndex ].text;
    testStar.src = newSrc;
    testStar.alt = newAlt;
    document.getElementById("item").innerHTML = "Src: "+newSrc+"  |Alt: "+newAlt;
}

http://jsfiddle.net/daCrosby/JkhxP/1/

修改

如果您不想在文件中添加文件扩展名，请将其删除：

<option value="" selected="selected">Choose a color</option> <option value="imgLink">Red Star</option> <option value="imgLink2">Yellow Star</option> <option value="img3">Pink Star</option>

如果您想要新src的完整链接，只需添加它：

var elemSel = document.getElementById('select1'), newSrc = elemSel.options[ elemSel.selectedIndex ].value; newSrc = "example.com/img/" + newSrc + ".png";

http://jsfiddle.net/daCrosby/JkhxP/2/

Javascript显示PNG图像

2 个答案: