jQuery addClass example

Change class name on click in jQuery

by BeePositive

HTML

<div class="modal fade" id="add_data_Modal">        
		<div class="modal-dialog">
            <div class="modal-content">				
				<div class="modal-body">
				<form method="post" id="insert_form2" enctype="multipart/form-data">
							<div class="card-body " style="background-color:#F8F9F9">
								<!-- select type-->
								<div class="form-group row pl-3 my-2" >
								<label class="col-lg-3 col-form-label form-control-label">Type</label>
									<div class="col-lg-9">
									<select id="up_category">
										<option selected>Select Type</option>
										<option>Document</option>
										<option>Map Services</option>
										<option>API</option>
									</select>
									</div>
								</div>
								<!-- end -->
								<!-- if selection is Document-->
								  <div id="sd9">
								  <div class="form-group row pl-3 my-2">
									<label class="col-lg-3 col-form-label form-control-label">Document</label>
									<div class="col-lg-9">
									<select class="form-control" name="up_type" id="up_type" size="0">
									  <option value="PDF">PDF</option>									
									  <option value="ZIP">ZIP</option>
									  <option value="RAR">RAR</option>
									  <option value="SHP">SHP</option>
									  <option value="UDB">UDB</option>
									</select>
									</div>
								  </div>
								  </div>
								  <!-- end-->
								  <!-- if selection is Map Services-->
								  <div id="rd9">
								  <div class="form-group row pl-3 my-2">
									<label class="col-lg-3 col-form-label form-control-label">Map Service</label>
									<div class="col-lg-9">
									<select class="form-control" name="up_type" id="up_type" size="0">
									  <option value="WMS">WMS</option>
									  <option value="WFS">WFS</option>
									  <option value="REST">REST</option>				
									</select>
									</div>
								  </div>							
								  </div>
								   <!-- end-->
								   <!-- if selection is API-->
									<div id="api9">	 ...

JavaScript

<!--Dependency of Upload Data Type Menu-->

				$("#up_category").on("change", function () {							
				CheckStatus();
			});
					$('#rd9').hide(); 								
					$('#sd9').hide(); 
					$('#api9').hide();

			function CheckStatus() {
				var ddl = $("#up_category");
				
				if ($(ddl).val() == "Select Type") {
					$('#rd9').hide(); 								
					$('#sd9').hide(); 
					$('#api9').hide();

				}else if ($(ddl).val() == "Document") {
					$('#sd9').show();             
					$('#rd9').hide();	
					$('#api9').hide();
				}
				else if ($(ddl).val() == "Map Services") {
					$('#rd9').show(); 								
					$('#sd9').hide(); 
					$('#api9').hide();
				}
				else if ($(ddl).val() == "API") {
					$('#api9').show();
					$('#rd9').hide(); 								
					$('#sd9').hide(); 
				} 			
			}

		<!--end Dependency of Upload Data Type Menu-->