根據下拉列表中的選擇設置CSS規則

我有動態生成id的文本框和下拉對。我試圖根據下拉列表中的選項在文本框中設置css規則（類）。我有一個下拉的索引，這是用來動態地派生下拉的ID。如何在文本框中設置CSS規則。如果我嘗試使用JavaScript設置類，則更改不會反映，直到我刷新頁面。根據下拉列表中的選擇設置CSS規則

我打開使用普通的JavaScript或jQuery或兩者的組合。

來源

2013-02-20 Bob76

你能表現出一定的代碼？ – dezman 2013-02-20 16:44:25

你不能使用後代選擇器來定位它們嗎？ http://www.w3.org/TR/CSS2/selector.html#descendant-selectors – InsomniaBass 2013-02-20 16:45:15

將一個類添加到您的選擇中，以便您可以更輕鬆地使用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); 
    } 
}

來源

2013-02-20 16:54:02 AndrewR

你可能會嘗試類似的;

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

這裏是一個Working Live Demo

來源

2013-02-20 17:14:32

根據下拉列表中的選擇設置CSS規則

回答

相關問題