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

Question

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

我愿意使用纯 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);
    }
}