JSFiddle - React, Tailwind, and code Playground

by ahmedadil1000

HTML

<fieldset id="food_type">
<legend>select type of food</legend>           
<label for="food_type">Food questions<span class="require">*</span></label>
<select tabindex="1" class="required" name="food_type" id="food_type" onchange="hide_show();"><option value="">Type</option>
<optgroup label="Favorite Food">
<option value="fruit" id="fruit" >Fruit</option>
<option value="starch" id="homeowners" >Starch</option>
<option value="sweets" id="sweets">Sweets</option>\
</optgroup>
</select>
</fieldset>

<fieldset id="fruit">
    <legend>About your favorite fruit</legend>

    <label for="color">Color<span class="require">*</span></label>
    <select tabindex="2" class="required" name="color" id="color">
        <option value="">Select</option><option value="orange">Orange</option><option value="yellow">Yellow</option>
    </select>
    <label for="taste">Taste<span class="require">*</span></label>
    <input tabindex="16" style="width:100px; float:left;" type="text" class="required" maxlength="3" size="3" name="age" id="age"/>
    <label for="availability">Availability<span class="require">*</span></label>
    <select tabindex="17" class="required" name="availability" id=" availability ">
        <option value="">Select</option><option value="restaurant">Restaurants</option><option value="farmermkt">Farmers Market</option><option value="Grocer">Grocer</option>
    </select>
    </fieldset>

JavaScript

function hide_show(){
				var option = document.getElementById("food_type").value;
				switch (option)
				{
				case 'fruit':
            $("#fruit").hide().find("input, select, textarea").val("").find('input[type=radio], input[type=checkbox]').attr('checked', false);
        break;
				case 'starch':				
					 $("#starch").hide().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
        break;
				case 'sweets':	
					 $("#sweets").show().find('input[type=radio], input[type=checkbox]').attr('checked', false).find("input, select, textarea").val("");
        //}
    }
		}