根据下拉列表中的选择设置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代码，假设您的输入文本框是select的兄弟。 您可能需要更改最后一行以选择正确的文本框。

$(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;
}

这是一个工作现场演示