JSFiddle - React, Tailwind, and code Playground

by stellamudd

HTML

<form action="#" method="post" role="form">
        <p>An * indicates a required field.</p>
        <div>
            <label for="position">Career *</label>
            <select id="position" aria-required="true">
                <option value="" selected="selected">Position</option>
                <option value="de">Database Engineer</option>
                <option value="ae">Accessibility Engineer</option>
                <option value="ne">Network Engineer</option>
                <option value="se">Software Engineer</option>
            </select>
        </div>
        <div>
            <label for="salary">Salary:</label>
            <select id="salary" title="Career Position above must be selected." disabled="disabled">
                <option value="" selected="selected">US Dollars/Year</option>
            </select>    
        </div>
        <div>
            <label for="feedback">Feedback:</label>
            <textarea id="feedback"></textarea>    
        </div>
    </form>

JavaScript

$(document).ready(function() {
    $("#position").bind("keydown blur change", function(e) {
        if(e.which === 9 || e.type === "blur" || e.type === "change") {
            if($(this).val() !== "") {                
                $("#salary").removeAttr("disabled").removeAttr("title");
                switch($(this).val()) {
                    case "de":               
                        $("#salary").html('<option value="" selected="selected">US Dollars/Year</option><option value="1" selected="selected">$20000</option><option value="2" selected="selected">$30000</option>').val("");                                                 
                        break;
                    case "ae":               
                        $("#salary").html('<option value="" selected="selected">US Dollars/Year</option><option value="3" selected="selected">$30000</option><option value="4" selected="selected">$40000</option>').val("");
                        break;                               
                    case "ne":               
                        $("#salary").html('<option value="" selected="selected">US Dollars/Year</option><option value="5" selected="selected">$50000</option><option value="6" selected="selected">$60000</option>').val("");  
                        break;        
                    case "se":               
                        $("#salary").html('<option value="" selected="selected">US Dollars/Year</option><option value="7" selected="selected">$70000</option><option value="8" selected="selected">$80000</option>').val("");  
                        break;                              
                }
            }
            else {
                $("#salary").html('<option value="" selected="selected">US Dollars/Year</option>').attr({
                    "disabled":"disabled",
                    "title":"Career Position above must be selected."
                });
            }
        }
    });        
});