Question

我有这个下拉列表

    <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" id = "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>

当我选择一些东西时，除了小学和中学之外，我想展示这个div

    <div class="box-body"  style="display:none" id = "COURSE">
      <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>

我的javascript是，

$(function() {
    $('#LEVEL').change(function(){
        $('.COURSE').hide();
        if($('#LEVEL').val() == 'Elementary' || 'Secondary'){
          $('.COURSE').hide();
        }else{
          $('#COURSE').show();
        }
    });
});

问题是，它是隐藏的，无论我选择什么价值

Answer 1

首先，COURSE有一个ID，因此您的选择器不正确。

要解决您的问题，if语句必须在两个逻辑部分中包含完整条件，如下所示：

$('#LEVEL').change(function(){
    $('#COURSE').hide();
    if($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary'){
      $('#COURSE').hide();
    } else {
      $('#COURSE').show();
    }
});

请注意，您可以通过使用带有布尔值的toggle()来缩短此值，并使用this关键字来保存DOM访问：

$('#LEVEL').change(function() {
    $('#COURSE').toggle($(this).val() != 'Elementary' && $(this).val() != 'Secondary');
});

Working example

Answer 2

您应该使用此if声明

 $(function() {
        $('#LEVEL').change(function(){
            $('.COURSE').hide();
if( ($('#LEVEL').val() == 'Elementary') || ($('#LEVEL').val() ==  'Secondary')) {
              $('.COURSE').hide();
            }else{
              $('#COURSE').show();
            }
        }); // change close
    }); // function close

Answer 3

您必须将if条件更改为if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary')。

同时将$('.COURSE').hide();更改为$('#COURSE').hide();。

注意： ID应该是唯一的。在您的代码中，div和input具有相同的ID COURSE

＆＃13;

$(function() {
  $('#LEVEL').change(function() {
    if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary') {
      $('#COURSE').hide();
    } else {
      $('#COURSE').show();
    }
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" id="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>

<div class="box-body" style="display:none" id="COURSE">
  <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>

＆＃13;

显示所选选项的div

3 个答案: