CODEWITHSUNDEEP
javascripthtmljquerycss
Roy Smith
Roy Smith

Reputation: 51

jquery for the drop-down select

Here is my index file code. whenever I select something into the drop-down then show me related dropdown.

I put this code in my file but I can't get drop down after selecting the main type.

css file code is .hide{display:none;}

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
    $('#mode').on('change', function () {
    var value = $("#mode option:selected").val();
    $('.hide').slideUp('fast').find('select').val('');
    $('#' + value).show('slow');
});
  </script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
<div class="">
    <label class="control-label">Mode</label>
    <select class="input-large m-wrap" name="mode" id="mode" required>
        <option value=""></option>
        <option value="general">General Knowledge</option>
        <option value="preparatory">Preparatory Exam</option>
    </select>
</div>
<div class=" hide" id="general">
    <br>
    <label class="control-label">Module</label>
    <select class="input-large m-wrap" name="module" id="sub">
        <option value=""></option>
        <option value="Module 1">Module 1</option>
        <option value="Module 2">Module 2</option>
    </select>
</div>
<div class=" hide" id="preparatory">
    <br>
    <label class="control-label">Exam</label>
    <select class="input-large m-wrap" name="exam" id="sub">
        <option value=""></option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
    </select>
</div>
</body>
</html>

Upvotes: 1

Views: 66

Answers (1)

Hien Nguyen
Hien Nguyen

Reputation: 18975

Your problem is type class=" hide" change to class="hide"

and you need move your script to before close body tag not head tag.

 $('#mode').on('change', function () {
    var value = $("#mode option:selected").val();
    //$('.hide').show();
    $('.hide').slideUp('fast').find('select').val('');
    $('#' + value).show('slow');
});
.hide{
  display:none;
}
<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script>
   
  </script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  
<div class="">
    <label class="control-label">Mode</label>
    <select class="input-large m-wrap" name="mode" id="mode" required>
        <option value=""></option>
        <option value="general">General Knowledge</option>
        <option value="preparatory">Preparatory Exam</option>
    </select>
</div>
<div class="hide" id="general">
    <br>
    <label class="control-label">Module</label>
    <select class="input-large m-wrap" name="module" id="sub">
        <option value=""></option>
        <option value="Module 1">Module 1</option>
        <option value="Module 2">Module 2</option>
    </select>
</div>
<div class=" hide" id="preparatory">
    <br>
    <label class="control-label">Exam</label>
    <select class="input-large m-wrap" name="exam" id="sub">
        <option value=""></option>
        <option value="A1">A1</option>
        <option value="A2">A2</option>
    </select>
</div>
</body>
</html>

Upvotes: 1

Related Questions