我正在尝试运行一个代码,其中一旦从下拉菜单中选择了一个选项,就应该出现一个图片。变化。看起来我的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/

10-12 12:32
查看更多