选定的图像从两个不同的下拉列表中更改并显示在一起

Question

我想做一些事情，您可以在其中选择前台和背景，并根据您选择的内容进行显示：https：//www.control4.com/solutions/products/switches

注意：两个图像都将从下拉列表中选择，并且在选择后应一起显示。我设法有点工作，但是我正在努力改变背景并在前景中展示它。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>                 
<div>
    <h3>Buttons</h3>
    <select id="switchSel">
      <option value="black">Black</option>
      <option value="brown">Brown</option>
      <option value="white">White</option>
      <option value="aluminum">Aluminum</option>
      <option value="biscuit">Biscuit</option>
      <option value="snowwhite">Snow White</option>
      <option value="midnightblack">Midnight Black</option>
      <option value="lightalmond">Light Almond</option>
    </select>
</div>
<div class="switch black">
    <div class="back">
        <!-- <select id="faceplate">
          <option value="backblack" class="backblack">Black</option>
          <option value="backbrown">Brown</option>
          <option value="backwhite">white</option>
          <option value="backbiscuit">Biscuit</option>
          <option value="backblack">Black</option>
          <option value="backblack">Black</option>
       </select>-->
    </div>
</div>

.back {
    background: url(switch/faceplate/white.png);
    height: 575px;
    width: 361px;
    display: inline-block;
    background-size: contain;
}
.backblack {
    -webkit-filter: saturate(110);
    filter: saturate(0);
}
.brown {
    background: url(switch/button/brown.png);
    height: 575px;
    width: 361px;
}
.black {
    background: url(switch/button/black.png);
    height: 575px;
    width: 361px;
}
.white {background: url(switch/button/white.png);
    height: 575px;
    width: 361px;
}
.aluminum {background: url(switch/button/aluminum.png);
    height: 575px;
    width: 361px;
}
.snowwhite {background: url(switch/button/snowwhite.png);
    height: 575px;
    width: 361px;
}
.lightalmond {background: url(switch/button/lightalmond.png);
    height: 575px;
    width: 361px;
}
.midnightblack {background: url(switch/button/midnightblack.png);
    height: 575px;
    width: 361px;
}
.biscuit {background: url(switch/button/biscuit.png);
    height: 575px;
    width: 361px;
}

Answer 1

要在选择框更改时更改元素上的类，您可以使用此简单的jQuery更改className。这种方法的唯一问题是，您还必须每次删除旧类名称，或以某种方式将其重置。

为了避免此问题，您可以将颜色值存储在属性中，并使用属性选择器对其进行定位。这样，您可以轻松地更新值。

var front = $('.front');
var back = $('.back');
$('#front').on('change', function(e){
  front.attr('data-colour', $(this).val());
});
$('#back').on('change', function(e){
  back.attr('data-colour', $(this).val());
});

更改选择值时，这将更改数据属性值。然后，您可以使用类似的内容来对每个人进行样式：

[data-colour="brown"]{
    background: brown url('switch/button/brown.png');
}

这是一个进一步解释概念的代码蛋白。

http://codepen.io/sudocat/pen/yvjjlx?editors=1111