Jquery select 选项

Question

我是 jQuery 的新手，想知道如何 select 在下拉 select 菜单中添加选项。

更具体地说：您可以 select 下拉菜单中的一种颜色，当您单击该按钮时，背景颜色会更改为该颜色。

提前致谢！

这是HTML：

    <div id="form-box">
        <h1>Funky Background Color Changer</h1>
        <p>1. Choose a funky background color:
            <select name="bgColor" id="">
                <option value="$juicy-cyan">Juicy Cyan</option>
                <option value="$purdy-purple">Purdy Purple</option>
            </select>
        </p>
        <p>2. That's it actually! Just click the button.</p><br>
        <button class="funk">Let's Funk!</button>
    </div>

Answer 1

首先你应该给select一个id属性，jQuery可以访问。例如，您可以使用与名称 bgColor 相同的名称。比代码将是：

$('#bgColor').val()

Answer 2

例如，将 ID 添加到您的 h1 和所选列表值的颜色（十六进制值），然后在单击按钮时设置背景：

Html

<div id="form-box">
        <h1 id="h1_id">Funky Background Color Changer</h1>
        <p>1. Choose a funky background color:
            <select name="bgColor" id="bgColor_id">
                <option value="#ff0000">Juicy Cyan</option>
                <option value="#0066ff">Purdy Purple</option>
            </select>
        </p>
        <p>2. That's it actually! Just click the button.</p><br>
        <button class="funk" id="submitButton">Let's Funk!</button>
    </div>

JQuery

$('#submitButton').on('click', function () {
    var color = $("#bgColor_id").val();
    $("#h1_id").css('background-color', color);
});

Jquery select 选项

Jquery select option

select

html-select