Question

我有一个id为'availmap'的列表框，其中包含路径为maps / image.jpg的图像文件名

我还有一个id为'map'的图像控件，我希望使用列表框的onclick事件将其更改为所选图像

这是我尝试过的js，无法弄清楚为什么它不起作用

<script type="text/javascript">
   function ChgImg() {
    var list = document.getElementById('availmap');
    var indx = list.selectedIndex;
    var img = list[indx].value;
    var id = document.getElementById('map');
    id.src="maps/" + img;

}

这是图片代码和列表框代码

<div id='avail' style='position:fixed;left:500px;top:0;z-index:0;text-align:center;bgcolor='#00b0e6';>
<span style='position:fixed;left:540px;top:30px;width:250px;font-family:Arial;font-size:15px;background-color:#00b0e6;border: 1px #000000 solid;'>Availible Maps</span>  </div>
<form action='jobs.php' target='joblist' style='position:fixed;left:500px;top:101px;'></td>

<select id='availmap' name='availmap' size='10' style='width: 250px;position:fixed;left:540px;top:51px;' onchange='ChgImg()'>
EOY;
while($row = mysqli_fetch_array($mapresult))
{ 
 echo "<option value=\"".$row['ID']."\">".$row['AssocMap']."</option>\n  ";
}

echo "</select>";

echo "</form>";

echo "<img id='map' src='' alt='' style='position:absolute;left:800px;top:30px;width:260px;height:185px;border: 1px #000000 solid;'>";

我确信这是相对简单的，我在这里失踪

Answer 1

您应该使用 Element.setAttribute()

添加新属性或更改现有属性的值指定的元素。
element.setAttribute(name, value);
<强> PARAMS


name是作为字符串的属性名称。

value是属性所需的新值。

所以，将代码更改为：

function ChgImg() {
        var list = document.getElementById('availmap');
        var indx = list.selectedIndex;
        var img = list[indx].value;
        var id = document.getElementById('map');
        id.setAttribute("src", img);

Answer 2

你的javascript几乎是正确的，只需使用id.src=img;

完成javascript：

function ChgImg() {
        var list = document.getElementById('availmap');
        var indx = list.selectedIndex;
        var img = list[indx].value;
        var id = document.getElementById('map');
        id.src=img;
}

我会使用更改事件而不是click事件。不要忘记在页面的头部添加代码。

<强>更新

您正在使用的javascript工作得很好，您可以在working example中看到。但是，我不认为您在所提供的代码中传递了图像的src的有效值（value=\"".$row['ID']."\）。当您确实需要为图像使用有效的src时（例如http://www.w3schools.com/images/w3schools_green.jpg），您似乎正在使用行的ID作为值（通常是数字）。您是否将图像的网址存储在该行的其他列中？如果是，请使用它而不是$row['ID']

另外，请检查您的HTML。你应该纠正一些错误（大多数单引号严重关闭）。

我还在example

中修改了你的html

更改列表框所选项目时更改图像

2 个答案: