jQuery select filters

Filter available color variants based on selected color category.

by Znote

HTML

<div id="banner-message">
  <h4>Filter available color variants based on selected color category.</h4>
  <p>Select color category:</p>
  <select id="category">
  	<option value="red">red</option>
  	<option value="green">green</option>
  	<option value="blue">blue</option>
  </select>

  <p>Select color variant</p>
  <select id="varint_full" style="display: none;">
  	<option class="red green blue" value="none">No variant</option>
  	<option class="red" value="indianred">Indian red</option>
  	<option class="red" value="orangered">Orange red</option>
  	<option class="red" value="darkred">Dark red</option>
  	<option class="green" value="forestgreen">Forest green</option>
  	<option class="green" value="lime">Lime</option>
  	<option class="green" value="lightseagreen">Light sea green</option>
  	<option class="blue" value="blueviolet">Blue violet</option>
  	<option class="blue" value="cornflowerblue">Corn flower blue</option>
  	<option class="blue" value="lightskyblue">Light sky blue</option>
  </select>
  <select id="variant_filtered">
  
  </select>
  
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

select {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

function filterVariant() {
	// Reset filters
	$('select#variant_filtered option').appendTo('select#varint_full')

	// Apply new filters
	var category = $('select#category').val()
	$('select#varint_full option.'+category).appendTo('select#variant_filtered')
	$('select#variant_filtered').val('none')
  
  changeColor()
}

function changeColor() {
	// Apply style change
	var filtered_color = $('select#variant_filtered').val()
	var category = $('select#category').val()

	$('select').css({'background-color': (filtered_color == 'none') ? category : filtered_color})
}

filterVariant()
$('#category').change(function() {
	filterVariant()
})
$('#variant_filtered').change(function() {
	changeColor()
})