disabled select options
by lukerichison
HTML
<select name="pattern" id="pattern">
<option value="0"></option>
<option value="1">Floral chintz</option>
<option value="2">Large scale fuchsia</option>
<option value="3">Hydrangea</option>
<option value="4">Small pink and olive flowers</option>
<option value="5">Blue, Lavender and tan floral</option>
<option value="6">Watercolor Pink floral</option>
<option value="7">Vintage Leaves</option>
<option value="8">Vintage Roses</option>
<option value="9">Chartreuse and aqua floral</option>
<option value="10">Aqua and pink vining floral</option>
<option value="11">Geometric triangles</option>
<option value="12">horizontal arrows and feathers</option>
<option value="13">diagonal arrows</option>
<option value="14">bold stripes</option>
</select>
<br/>
<select name="envelope-color" id="envelope-color">
<option value=""></option>
<option value="1">Mist</option>
<option value="2">Daffy</option>
<option value="3">Tiffany</option>
<option value="4">Figi</option>
<option value="5">Emerald</option>
<option value="6">Verde</option>
<option value="7">Sapphire</option>
<option value="8">Rosa</option>
<option value="9">Pink Feather</option>
<option value="10">Lavanda</option>
<option value="11">Ginger</option>
<option value="12">Coral</option>
<option value="13">Pomegranate</option>
<option value="14">Firecracker</option>
<option value="15">Sugared Lemon</option>
<option value="16">Sole</option>
<option value="17">Celadon</option>
<option value="18">Mystique</option>
<option value="19">Olive</option>
<option value="20">Pewter</option>
<option value="21">Stone Grey</option>
<option value="22">Desert Storm</option>
<option value="23">Natural Kraft</option>
<option value="24">White</option>
</select>
<select name="second-color" id="second-color">
<option value="0">second</option>
<option value="1">Mist</option>
...
JavaScript
/* Color Limiters --------------------------------------------- */
var ec = ["Mist", "Daffy", "Tiffany", "Figi", "Emerald", "Verde", "Sapphire", "Rosa", "Pink Feather", "Lavanda", "Ginger", "Coral", "Pomegranate", "Firecracker", "Sugared Lemon", "Sole", "Celadon", "Mystique", "Olive", "Pewter", "Stone Grey", "Desert Storm", "Natural Kraft", "White"],
cc = ec.concat(["Gold Foil", "Silver Foil", "Copper Foil"]),
ec1 = ["Pomegranate", "Figi", "Natural Kraft", "White", "Olive", "Desert Storm"],
ec2 = ["Mystique", "Natural kraft", "White", "Pink Feather", "Pewter"],
ec3 = ["Desert Storm", "Sapphire", "Serengeti", "Daffy", "Pewter", "Natural Kraft", "whtie", "Stone Grey", "Celadon"],
ec4 = ["Olive", "Pink Feather", "Rosa", "Bianco", "Natural Kraft", "pomegranate"],
ec5 = ["Desert Storm", "Natural Kraft", "white", "Daffy", "Lavanda", "Emerald", "Tiffany"],
ec6 = ["Pewter ", "Celadon", "Natural Kraft", "Desert Storm", "white", "Pink Feather", "Rosa", "Pomegranate", "Sugared Lemon"],
ec7 = ["Natural kraft", "white", "Emerald", "Pomegranate", "Rosa", "Pink Feather"],
ec8 = ["Rosa", "Pink Feather", "Natural Kraft", "white", "Emerald", "Pomegranate"],
ec9 = ["Mystique", "Daffy", "Figi", "Tiffany", "white", "Natural Kraft", "Desert Storm", "Olive", "Rosa", "Pewter"],
ec10= ["Tiffany", "Daffy", "Desert Storm", "Natural Kraft", "Bianco", "Pink Feather", "Stone Grey"],
ec11= ec,
ec12= ec,
ec13= ec,
ec14= ec,
ecA = [ec1,ec2,ec3,ec4,ec5,ec6,ec7,ec8,ec9,ec10,ec11,ec12,ec13,ec14];
$("#pattern").change(function(){
var ecE = $("#envelope-color"),
ccE = $("#second-color");
ecE.val("").children("option").attr("disabled", "disabled");
ccE.val("").children("option").attr("disabled", "disabled");
ecA[$(this).val()-1].forEach(function(elem){
ecE.children("option[value="+(ec.indexOf(elem)+1)+"]").removeAttr("disabled");
});
});