Javascript 根据<；将背景更改为图片；选项>；价值选择

所以我知道这个问题以前也被问过，但是我没有在这个提要中找到答案，因为这个答案不适用于我的其他JavaScript。 这是我的问题。我正在尝试添加一个菜单来更改我正在处理的表单的背景。当从

字段中选择

时，我不知道如何对图像进行背景更改。我只想用JavaScript来实现这一点，但如果需要，我将使用JQuery

<label for="pictype">Select a New Background</label>
<select id="pictype" name="pictype" onclick="picchange()">
    <option value="p1">pic1</option>
    <option value="p2">pic2</option>
    <option value="p3">pic3</option>
    <option value="p4">pic4</option>
    <option value="p5">pic5</option>
    <option value="p6">pic6</option>
</select>

选择一个新的背景
图1
图2
图3
图4
图5
图6

以下是代码：

    $( "#pictype" ).change(function(){

        if( this.value == "p1" ) //here goes code to change picture
        if( this.value == "p2" ) //here goes code to change picture
        ......

    });

演示：

选择一个新的背景
图1
图2
图3
图4
图5
图6

试试这个。注意：我删除了调用pictype的onclick函数

HTML

    <select id="pictype" name="pictype">
        <option value="p1">pic1</option>
        <option value="p2">pic2</option>
        <option value="p3">pic3</option>
        <option value="p4">pic4</option>
        <option value="p5">pic5</option>
        <option value="p6">pic6</option>
    </select>

---

您可以使用.change事件和智能文件命名来实现此结果。使用jQuery是迄今为止最简单的解决方案

如果将图像命名为与选项值相同的名称，则可以基于选定的当前选项引用图像。因此，对于第一个选项，您可以将图片命名为p1.jpg

<label for="pictype">Select a New Background</label>
    <select id="pictype" name="pictype">
    <option value="p1">pic1</option>
    <option value="p2">pic2</option>
    <option value="p3">pic3</option>
    <option value="p4">pic4</option>
    <option value="p5">pic5</option>
    <option value="p6">pic6</option>
    </select>

因此，如果您选择选项#1，它会将背景图像url设置为url（“../Images/p1.jpg”）

以下是JSFIDLE：

---

希望这有帮助

您忘记发布picchange（）函数了。谢谢大家！非常感谢你的帮助。

var selectEl = document.getElementById("pictype");

selectEl.onclick = function () {

    if (this.value == "p1") {
        document.body.style.backgroundColor = "Black";
    }
    else {
        document.body.style.backgroundColor = "White";
    }
}

<label for="pictype">Select a New Background</label>
    <select id="pictype" name="pictype">
    <option value="p1">pic1</option>
    <option value="p2">pic2</option>
    <option value="p3">pic3</option>
    <option value="p4">pic4</option>
    <option value="p5">pic5</option>
    <option value="p6">pic6</option>
    </select>

 $("#pictype").change(function(){
    var imageFileName = $(this).val();
    $("body").css("background-image", "url(../Images/"+imageFileName+".jpg)");    
});