anzeigen div je nach Auswahlfeld Auswahl

Question

Ich habe eine Funktion, die hier

$(function() { 
    $('#LEAVE_ENTITLED').change(function(){ 
     $('.solop').hide(); 
     $('#' + $(this).val()).show(); 
    }); 
}); 

arbeitet, was es tut, ist ein div zeigen bei der Auswahl abhängig.

Beispiel: Der Wert der Auswahl ist = abc, dann wird div gefunden. mit id von abc,

was ich jetzt tun wollte, ist dieses div zu zeigen.

<div class="box-body"> 
     <div class="form-group"> 
     <label for="COURSE" class="col-sm-2 control-label col-sm-offset-2"><span>*</span>Degree/Course:<br>(Write in full)</label> 
      <div class="col-sm-5"> 
      <input type="text" class="form-control" id="COURSE" name="COURSE"value = "<?= set_value("COURSE"); ?>"> 
      </div> 
     </div> 
     <div class="form-group has-error col-sm-offset-7"> 
     <label class="control-label" for="error"><?php echo form_error("COURSE"); ?></label> 
     </div> 
    </div> 

wenn ich ausgewählt eine der folgenden Aktionen: GraduateStudies,Trade School,College, Vocational dieser Auswahlbox

<div class="box-body"> 
     <div class="form-group"> 
     <label class="col-sm-2 control-label col-sm-offset-2" for="LEVEL"><span>*</span>Level:</label> 
      <div class="col-sm-5"> 
      <select class="form-control" name = "LEVEL"> 
       <option value = "<?= set_value("LEVEL"); ?>"><?= set_value("LEVEL"); ?></option> 
       <option value="Elementary"  > Elementary  </option> 
       <option value="Secondary"  > Secondary  </option> 
       <option value="College"   > College   </option> 
       <option value="Vocational"  > Vocational  </option> 
       <option value="Trade School" > Trade School  </option> 
       <option value="GraduateStudies" > GraduateStudies </option> 
      </select> 
      </div> 
     </div> 
    </div> 

Sie bitte mein Javascript aktualisieren oder mir ein neues Geschäft machen? Danke

Answer 1

Sie können Select-Tag Klassenname und Change Event binden.

Überprüfen Sie den folgenden Code.

$(document).ready(function(){ 
$('.form-control').on('change',function(){ 
     $('.solop').hide(); 
     $('#' + $(this).val()).show(); 
    }); 
});