javascript - 根据下拉列表中的选择设置 CSS 规则

Question

我有文本框和下拉对，其 id 是动态生成的。我正在尝试根据下拉列表中的选择在文本框上设置 css 规则（类）。我在下拉列表中有一个索引，用于动态导出下拉列表的 id。如何在文本框上设置 CSS 规则。如果我尝试使用 JavaScript 设置类，则在刷新页面之前更改不会反映。

我愿意使用纯 javascript 或 jquery 或两者的混合。

Answer 1

将一个类添加到您的选择中，以便您可以更轻松地使用 jQuery 选择它们。

<div>
    <select id="Generated1234" class="cssRule">
        <option value="class1">Class #1</option>
        <option value="class2">Class #2</option>
    </select>
    <input type="text" name="Generated1234_text"/>
</div>

jQuery 代码，假设您的输入文本框是选择的兄弟。您可能需要更改最后一行以选择正确的文本框。

$(document).ready(function(){
    $('select.cssRule').change(function(){
        var $this = $(this);
        var className = $this.val();
        $this.siblings('input[type=text]').attr('class', className);
    }
}

Answer 2

你可以尝试类似的东西；

HTML;

<select id="selectoptions" class="cssRule">
        <option class="class1" value="red">red</option>
        <option class="class2" value="blue">blue</option>
    </select>
<input id="mytext" type="text" name="mytext"/>

JavaScript; //将代码包装在document.ready.function中

$("select").change(function () {
    var color = $("#selectoptions").val();
    $("#mytext").css("background",color);
});

CSS；

#mytext{
    background:red;
}

这是一个工作现场演示