JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<form id="formname" name="formname" method="post" action="submitform.asp" >
		<table width="50%" border="0" cellspacing="0" cellpadding="5">
			<tr>
				<td width="41%" align="right" valign="middle">Category1 :</td>
				<td width="59%" align="left" valign="middle">
					<select name="category1" id="category1">
						<option value="">Select Category1</option>
						<option value="home_ware">Home Ware</option>
						<option value="education">Education</option>
						<option value="books">Books</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="right" valign="middle">Category2 :</td>
				<td align="left" valign="middle">
					<select disabled="disabled" class="subcat" id="category2" name="category2">
						<option value>Select Category2</option>
						<!-- Home Ware -->
						<option rel="home_ware" value="air-conditioners_coolers">Air-Conditioners/Coolers</option>
                        <option rel="home_ware" value="audio-video">Audio/Video</option>
						<option rel="home_ware" value="beddings">Beddings</option>
						<option rel="home_ware" value="camera">Camera</option>
						<option rel="home_ware" value="cell-phones">Cell Phones</option>
						<!-- Education -->
						<option rel="Education" value="Colleges">Colleges</option>
						<option rel="Education" value="Institutes">Institutes</option>
						<option rel="Education" value="Schools">Schools</option>
						<option rel="Education" value="Tuitions">Tuitions</option>
						<option rel="Education" value="Universities">Universities</option>
						<!-- Books -->
						<option rel="Books" value="College Books">College Books</option>
						<option rel="Books" value="Engineering">Engineering</option>
						<option rel="Books" value="Magazines">Magazines</option>
						<option rel="Books" value="Medicine">Medicine</option>
						<option rel="Books" value="References">References</option>
					</select>
				</td>
			</tr>
			<tr>
				<td align="right" valign="middle">Category3 :</td>
				<td...

CSS

.subcat option{
    display:none;
}

.subcat option.label{
    display:block;
}

JavaScript

$(function(){
    
    var $cat = $("#category1"),
        $subcat = $(".subcat");
    
    $cat.on("change",function(){
        var _rel = $(this).val();
        $subcat.find("option").attr("style","");
        $subcat.val("");
        if(!_rel) return $subcat.prop("disabled",true);
        $subcat.find("[rel="+_rel+"]").show();
        $subcat.prop("disabled",false);
    });
    
});