Dropdown configurator using JSON

Dynamic and flexible configurator which can run on any number of dropdown boxes.

by Sumit Raju

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="configuratorWrap">
		
</div>

CSS

html,body
{
	margin: 0;
	padding: 0;
}
img, a
{
	border: 0;
	outline: 0;
}
*
{
  box-sizing:border-box;
}
.ContainerWrap
{
	max-width: 1180px;
	min-width: 200px;
	width: auto;
	height: auto;
	margin: 0px auto;
  font-family: arial;
}
.Container
{
	width: 100%;
	height: auto;
	margin: 0 auto;
}
.clearFix
{
	clear: both;
	height: 0;
}
.configuratorWrap
{
    width: 300px;
  height: auto;
      margin: 50px auto;
}
.configDropDown {
  background: #fff;
  display: inline-block;
  padding: 10px 50px 10px 10px;
  border: 1px solid #999;
  position: relative;
  cursor: pointer;
  -webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
  margin-right: 7px;
  margin-bottom: 10px;
  min-width: 120px;
}

.dropArrow
{
  background: url(http://s14.postimg.org/5go5t4bhp/arrow_drop.png)no-repeat;
  position: absolute;
  right: 10px;
  top: 50%;
  display: block;
  width: 16px;
  height: 8px;
  background-position: 0px -8px;
  margin-top: -4px;
}
.configDropDown:hover .dropArrow
{
  background: url(http://s14.postimg.org/5go5t4bhp/arrow_drop.png)no-repeat;
  background-position: 0px 0px;
}
.configDropDownSelect
{
  font-size: 18px;
  color: #999;
}
.configDropDownDisabled
{
  border: 1px solid #f0f0f0;
  cursor: default;
}
.configDropDownDisabled:hover .dropArrow
{
  background: url(http://s14.postimg.org/5go5t4bhp/arrow_drop.png)no-repeat;
  background-position: 0px -8px;
}
.configDropDownDisabled .configDropDownSelect
{
  color: #E0E0E0;
}
.configDropDown:hover
{
  border: 1px solid #666;
}
.configDropDown:hover .configDropDownSelect
{
  color: #666;
}
.configDropDownDisabled:hover
{
  border: 1px solid #E0E0E0;
}
.configDropDownDisabled:hover .configDropDownSelect
{
  color: #E0E0E0;
}
.configDropDown ul
{
  position: absolute;
  list-style: none;
  margin: 0;
  padding: 0;
  top: 42px;
  width: 100%;
  background-color: #fff;
  left: 0px;
  display: none;
  z-index: 3;
}
.configDropDown ul li
{
  padding: 5px 0px 5px 15px;
  border: 1px solid #ccc;
 ...

JavaScript

var Dropdowns = ["Model", "Color", "Memory","design","covers","music"];
	var Data ={
   "phones":[
      {
         "oid":":000000F0:00000458:",
         "level1":"3G",
         "level2":"white",
         "level3":"16GB",
         "level4":"slim",
         "level5":"Back cover",
         "level6":"headphone",
         "price":"£568.63",
         "addToCart":"#Cart1"
      },
      {
         "oid":":000000F0:00000458:",
         "level1":"3G",
         "level2":"white",
         "level3":"16GB",
         "level4":"slim",
         "level5":"Flip cover",
         "level6":"headphone",
         "price":"£568.63",
         "addToCart":"#Cart2"
      },
      {
         "oid":":000000F0:00000458:",
         "level1":"3G",
         "level2":"white",
         "level3":"16GB",
         "level4":"hard",
         "level5":"Flip cover",
         "level6":"headphone",
         "price":"£599.63",
         "addToCart":"#Cart3"
      },
      {
         "oid":":000000F0:0000046B:",
         "level1":"4G",
         "level2":"white",
         "level3":"32GB",
         "level4":"metal",
         "level5":"Flip cover",
         "level6":"headphone",
         "price":"£698.47",
         "addToCart":"#Cart4"
      },
      {
         "oid":":000000F0:0000046A:",
         "level1":"3G",
         "level2":"black",
         "level3":"32GB",
         "level4":"hard",
         "level5":"Flip cover",
         "level6":"headphone",
         "price":"£808.47",
         "addToCart":"#Cart5"
      },
      {
         "oid":":000000F0:000003B4:",
         "level1":"4G",
         "level2":"black",
         "level3":"64GB",
         "level4":"wide screen",
         "level5":"Flip cover",
         "level6":"headphone",
         "price":"£509.99",
         "addToCart":"#Cart6"
      },
      {
         "oid":":000000F0:000003DA:",
         "level1":"3G",
         "level2":"black",
         "level3":"16GB",
         "level4":"slim",
         "level5":"Flip cover",
         "level6":"headphone",
    ...