Изменить цвет фона div на основе выпадающего списка шестнадцатеричных кодов

Question

Как использовать jQuery для изменения фона <div>, выбрав код HEX из отдельного раскрывающегося списка.

HTML

<select id="target"> 
    <option value="#c2c2c2">Grey</option> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select> 

Answer 1

Приложить изменения событие опций выпадающих. Поскольку значение раскрывающегося списка, скорее всего, будет вашим шестнадцатеричным кодом или цветом, вы можете просто извлечь это значение и использовать его непосредственно в вызове css. Вот пример использования jQuery.

Обновление: Кроме того, включен пример, который использует значение таблицы и реагирует на событие .hoverdocumented here. Здесь я выбираю таблицу из ее идентификатора #hoverTable и выбирает ячейку td, а затем вытащил ее html $(this).html() и присвоил ее переменной, которую я передал в новую развязанную функцию bgChange. Чтобы изменить другой элемент на странице, просто измените селектор на bgChange и QED.

JavaScript (JQuery)

$(document).ready(function(){ 
    // Function to change colors 
    var bgChange = function (newColor) { 
     $("body").css("background", newColor); 
     return true; 
    } 

    $("#hoverTable td").hover(function(e){ 
     var color = $(this).html(); 
     bgChange(color); 
    }, function(){ 
     bgChange("#FFF"); 
    }); 

    $("#target").change(function() { 
     var color = $("#target").val(); // Val is your hex code 
     $("body").css("background", color); 
    }); 
}); 

HTML

<div class="row"> 
<table id="hoverTable" class="table" > 
    <tr> 
    <th>Name</th> 
    <th>ColorCode</th> 
    <th>Misc</th> 
    </tr> 
    <tr> 
     <td>Bryce</td> 
     <td>Blue</td> 
     <td>Balloon</td> 
    </tr> 
    <tr> 
     <td>Eve</td> 
     <td>Grey</td> 
     <td>94</td> 
    </tr> 
    <tr> 
     <td>Corey</td> 
     <td>Red</td> 
     <td>Cheese</td> 
    </tr> 
</table> 
</div> <!-- row --> 

<select id="target"> 
    <option value="#c2c2c2">Grey</option> 
    <option value="blue">Blue</option> 
    <option value="red">Red</option> 
</select>