我正在尝试运行一个代码,其中一旦从下拉菜单中选择了一个选项,就应该出现一个图片。变化。看起来我的JS根本无法正常工作。很抱歉发布基本类型,我是Java语言/ HTML的新手。附带代码。
试图将javascript分开并调用它,但是没有用。
var pictureList = [
"http://lorempixel.com/400/200/sports/1",
"http://lorempixel.com/400/200/sports/2",
"http://lorempixel.com/400/200/sports/3",
"http://lorempixel.com/400/200/sports/4",
"http://lorempixel.com/400/200/sports/5", ];
$('#picDD').change(function () {
var val = parseInt($('#picDD').val());
$('img').attr("src",pictureList[val]);
});
img {
width:400px;
margin:auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="http://lorempixel.com/400/200/sports/1" />
<select id="picDD">
<option value="1" selected>Picture 1</option>
<option value="2">Picture 2</option>
<option value="3">Picture 3</option>
<option value="4">Picture 4</option>
<option value="5">Picture 5</option>
</select>
</body>
</html>
最佳答案
您应该使用jquery库来运行代码。将此脚本添加到您的HTML代码中:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
如果您不使用此库,则您的选择将不起作用。
关于javascript - 选择下拉列表时,JavaScript代码无法显示图片,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57568046/