如何使用select标记和javascript更改div的背景？

我在这里找到了我的问题的答案，但它对我来说真的不起作用。我对编程非常陌生，对使用javascript还不太熟悉。遗憾的是，我已经尝试这么做很长时间了

我要做的是，每当我更改select标记中的选项时，都要更改div的背景。这是我的.JSP代码

Add Ons Type:
<select id="addOnsType" name="addOnsType" onchange="changePicture()">
    <option selected disabled> select add ons</option>
    <c:forEach var="addOnsType" items="${addOnsType}">
        <option value="${addOnsType.addOnsTypeId}"> ${addOnsType.description} </option>
    </c:forEach>
</select>

<div id="PictureDiv" style="height: 58px; width: 344px">
</div>

如有任何帮助/提示/答案，将不胜感激。谢谢

---

后续的新手问题：我对javascript和jQuery很困惑，有什么区别吗？

AddOnTypeSelected

是一个dom元素引用，它没有jQuery提供的

val（）

函数

您可以使用id选择器获取这些元素的jQuery对象并获取值

function changePicture() {
  var addOnsTypeSelected = $("#addOnsType").val(),
    backgroundImage;

  if (addOnsTypeSelected == 1) {
    backgroundImage = "url('../images/cartoon1.jpg')";
  } else if (addOnsTypeSelected == 2) {
    backgroundImage = "url('../images/cartoon2.jpg')";
  } else if (addOnsTypeSelected == 3) {
    backgroundImage = "url('../images/cartoon3.jpg')";
  }
  $('#PictureDiv').css('background-image', backgroundImage);

};

但是使用jQuery事件处理程序，您可以

jQuery（函数（）{
var imgs={
1:“url（//placehold.it/64/ff0000）”，
2:'url（//placehold.it/64/00ff00）'，
3:'url（//placehold.it/64/0000ff）'
}
$（'#addOnsType'）。更改（函数（）{
$（'#PictureDiv'）.css（'background-image'，imgs[$（this.val（）]| |'none'）；
});
});

附加组件类型：
选择附加组件
1.
2.
3.
Jquery是一个用javascript编写的库，它允许为基于web的javascript编写更简单/更可靠的代码。可以将其视为一个使js更易于开发的工具包。感谢您提供的信息！：）非常感谢你！我将尝试第一个，因为我上次使用了id选择器，然后探索第二个。：）
function changePicture() {
  var addOnsTypeSelected = $("#addOnsType").val(),
    backgroundImage;

  if (addOnsTypeSelected == 1) {
    backgroundImage = "url('../images/cartoon1.jpg')";
  } else if (addOnsTypeSelected == 2) {
    backgroundImage = "url('../images/cartoon2.jpg')";
  } else if (addOnsTypeSelected == 3) {
    backgroundImage = "url('../images/cartoon3.jpg')";
  }
  $('#PictureDiv').css('background-image', backgroundImage);

};