Attempting to replicate this exact functionality on my own site has proven difficult. Despite success on jsfiddle, none of the browsers I've tested seem to cooperate. Any suggestions? Even when isolated as the sole element on a page, it simply refuses to function properly. http://jsfiddle.net/RWUdb/101/
<div>
<label>Device:</label>
<select name="Device" id="Device" class="" onclick="craateUserJsObject.ShowPrivileges();">
<option value="Select">--Select a Device--</option>
<option id="iOS" value="iOS">iOS Device</option>
<option id="macdesktops" value="macdesktops">Mac Desktop</option>
<option id="maclaptops" value="maclaptops">Mac Laptop</option>
<option id="pcdesktops" value="pcdesktops">PC Desktop</option>
<option id="pclaptops" value="pclaptops">PC Laptop</option>
</select>
</div>
<div class="resources" style=" display: none;"><select>
<option>-Select a Model-</option>
<option value="Touch">iPod Touch</option>
<option value="Nano">iPod Nano</option>
<option value="Classic">iPod Classic</option>
<option value="Shuffle">iPod Shuffle</option>
</select> <font color="red">*</font></div>
<div class="resources2" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="iMac">iMac</option>
<option value="MacPro">Mac Pro</option>
<option value="Mini">Mac Mini</option>
</select> <font color="red">*</font>
</div>
<div class="resources3" style=" display: none;">
<select>
<option>-Select a Model-</option>
<option value="White">White Macbook</option>
<option value="Pro">Macbook Pro</option>
<option value="Air">Macbook Air</option>
</select> <font color="red">*</font>
</div>
<div class="resources4" style=" display: none;">
<input type="text" id="pcdesktops" placeholder="ie. Dell Optiplex 9010"/> <font color="red">*</font>
</div>
<div class="resources5" style=" display: none;">
<input type="text" id="pclaptops" placeholder="ie. Lenovo G580" /> <font color="red">*</font>
</div>
Javascript:
var Privileges = jQuery('#Device');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'iOS') {
$('.resources').show();
}
else $('.resources').hide();
if ($(this).val() == 'macdesktops') {
$('.resources2').show();
}
else $('.resources2').hide();
if ($(this).val() == 'maclaptops') {
$('.resources3').show();
}
else $('.resources3').hide();
if ($(this).val() == 'pcdesktops') {
$('.resources4').show();
}
else $('.resources4').hide();
if ($(this).val() == 'pclaptops') {
$('.resources5').show();
}
else $('.resources5').hide();
});