0

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

<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 个选择选项，但数组太多了。有更简单的方法吗？

4

2 回答 2

0

如果要避免使用所有数组，则需要稍微修改一下 HTML。该数组用作 key-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 textalt 文本即可。

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/

于 2013-08-11T20:08:43.937 回答
0

1.) 不要使用innerHTML，它是微软专有的 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>
于 2013-08-11T19:53:32.727 回答