Question

我需要更改以获取数据颜色属性而不是价值？

感谢您的帮助:)

<select class="color" onchange="getval(this);">
    <option data-color="#111111" value="#111111">color 1</option>
    <option data-color="#222222" value="#222222">color 1</option>
    <option data-color="#333333" value="#333333">color 1</option>
    <option data-color="#444444" value="#444444">color 1</option>
</select>  

<script>         
    $('.color').on('change', function(){
        $("#newcolor").css("background", (this.value));
    });
</script>

Answer 1

使用.data方法

$( "#newcolor" ).css( "background", ( $(this).data("color") ) );

Answer 2

保持简单：将其添加到您当前的getval功能中：

 function getval(curr) {
     var color = $(curr).find(':selected').data('color');
     $("#newcolor").css("background-color", color);
 }

Answer 3

这是一种做法。虽然我不得不挖掘一下来找到数据/颜色值。

$('.color').on('change', function () {
    var value = $(this).val();
    var color = $(this).find('[value="' + value + '"]').data("color");
    $("#newcolor").css("background", color);
})

div {
    width: 100;
    height: 100px;
    background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="newcolor"></div>
<select class="color">
    <option data-color="#111111" value="#111111">color 1</option>
    <option data-color="#222222" value="#222222">color 1</option>
    <option data-color="#333333" value="#333333">color 1</option>
    <option data-color="#444444" value="#444444">color 1</option>
</select>

使用select中的数据属性更改颜色

3 个答案: