JSFiddle - React, Tailwind, and code Playground

by vipulg

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<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();
});