CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kev_m
kev_m

Reputation: 325

Show div on chosen select items

I have this dropdown

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

and when I select something, except for elementary and secondary, I want to show this 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>

my javascript is, 

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

the problem is, it is hidden, whatever value I select

Upvotes: 0

Views: 72

Answers (3)

Pugazh
Pugazh

Reputation: 9561

You have to change the if condition as if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary').

Also change $('.COURSE').hide(); to $('#COURSE').hide();.

Note: Id's should be unique. In your code both div and input has same id COURSE

$(function() {
  $('#LEVEL').change(function() {
    if ($('#LEVEL').val() == 'Elementary' || $('#LEVEL').val() == 'Secondary') {
      $('#COURSE').hide();
    } else {
      $('#COURSE').show();
    }
  });
});
<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>

Upvotes: 0

Bhavin Shah
Bhavin Shah

Reputation: 2482

You should use this if statement

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

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Firstly, the COURSE has an id, so your selector is incorrect.

To solve your problem, the if statement must include the full condition in both logical parts, like this:

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

Note that you can shorten this by using toggle() with a boolean, and also by using the this keyword to save on DOM accesses:

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

Working example

Upvotes: 2

Related Questions