Javascript 在网站上的选择框中选择背景

我对javascript和php不是很在行，我知道要完成这项工作，我需要使用js和php

我想创建一个包含4个不同图像的“选择框”。 将有一个默认的图像，但在这个选择框中，用户应该能够选择其他3个背景之一，如果他们想

我不确定它为什么不起作用，因此我将在下面向您展示我的文件：

以下是webclient.html：

<div class="dropdown" id="dropdown">
                <input type="checkbox" id="drop1" />
        <label for="drop1" class="dropdown_button">Background <span class="arrow"></span></label>
        <ul class="dropdown_content">
            <li><a href="#" onclick="changeImage(1);">Navy Aero</a></li>
            <li><a href="#" onclick="changeImage(2);"><img src="img/b_webclient_2.png" /></a></li>
            <li><a href="#" onclick="changeImage(3);">Gray Bullet</li>                                
            <li><a href="#" onclick="changeImage(4);">Dark Pheonix</li>
        </ul>
        <!-- note that the <img src> was just to test if it would work if I placed image in. -->
    </div>

changebg.php：

<?php

    if (isset($_POST['number'])) 
    {
        session_start();
        $_SESSION['image'] = $_POST['number'];
    }

?>

最终产品如下所示：

---

当我单击其中任何一个按钮时，都不会发生任何事情。

您可以使用纯jQuery进行如下操作，只需将

backgroundColor

替换为

backgroundImage

，并将选择的值替换为图像的路径，或图像的编号，并在id路径中使用bg变量，如

'img/'+bg+'.png'

$('#bgs').on('change', function() {
    var bg = $(this).find(':selected').val(),
        body = $('body');
    body.css('backgroundColor', bg);
});

---

在价值上，我会投入什么？比如“黑暗系绳”或者“网络客户端1.png”？你可以使用

value=“img/webclient_1.png”

我不是想制造很多麻烦，但是我可以使用我的代码吗，因为用div而不是selects来设置整个下拉框的样式更容易。我在下面的答案中添加了一些更改，包括一个布局效果，该效果会将页面淡出为黑色，以便更改不会如此突然和突然。

<?php

    if (isset($_POST['number'])) 
    {
        session_start();
        $_SESSION['image'] = $_POST['number'];
    }

?>

$('#bgs').on('change', function() {
    var bg = $(this).find(':selected').val(),
        body = $('body');
    body.css('backgroundColor', bg);
});