javascript - 根据选择框的选择显示 div

Question

我这里有一个正在运行的函数:

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

它的作用是根据选择显示一个 div。

比如selection的值为=abc，那么就会找到div。 id 为 abc，

我现在想做的是显示这个div。

    <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>

如果我选择以下任何一项:GraduateStudies、贸易学校、学院、 职业从此选择框

    <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>

您可以更新我的 javascript 或为我制作一个新的吗？

谢谢。

Answer 1

您可以使用选择标签类名并绑定(bind)更改事件。

检查下面的代码。

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