jqueryを使用してオプションを選択したときに関連するdivを表示する方法は？

Question

私はselectに複数のオプションがあります。選択オプションが選択されている場合、特定の<div>が表示されます。

ここに私のhtmlです。

$(function() { 
    $("#reports").change(function() { 
    if ($("#subjects").is(":selected")) { 
     $("#subjects_form").show(); 
     $("#classes_form").hide(); 
     /* ... */ 
    } 
    if ($("#classes").is(":selected")) { 
     $("#classes_form").show(); 
     $("#subjects_form").hide(); 
     /* ... */ 
    } 
    if (...) { 
     ... 
    } else { 
     $("#subjects_form").hide(); 
     $("#classes_form").hide(); 
     ... 
    } 
    }).trigger('change'); 
}); 

.form { display: none } 

<select class="form-control" id="reports"> 
    <option selected="selected" disabled="disabled" value="">Select Report to print</option> 
    <option value="subjects" id="subjects">Subjects</option> 
    <option value="classes" id="classes">Classes</option> 
    <option value="teachers" id="teachers">Teachers</option> 
    <option value="students" id="students">Students</option> 
    <option value="departments" id="departments">Departments</option> 
</select> 

<div class="form" id="subjects_form">Subjects</div> 
<div class="form" id="classes_form">Classes</div> 
<div class="form" id="teachers_form">Teachers</div> 
<div class="form" id="students_form">Students</div> 

のみ上記のコードは、最後のオプションで動作しますが。

Answer 1

Idは<option>タグの有効な属性ではありません。 idの代わりにvalue属性を使用し、関連するdivをidで選択します。あなたが巣にあなたの条件をelse ifステートメントを使用する必要が

$("#reports").change(function() { 
 
    $(".form").hide(); 
 
    $("#" + this.value + "_form").show(); 
 
}).trigger('change');

.form { display: none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control" id="reports"> 
 
    <option selected disabled value="">Select Report to print</option> 
 
    <option value="subjects">Subjects</option> 
 
    <option value="classes">Classes</option> 
 
    <option value="teachers">Teachers</option> 
 
    <option value="students">Students</option> 
 
    <option value="departments">Departments</option> 
 
</select> 
 

 
<div class="form" id="subjects_form">Subjects</div> 
 
<div class="form" id="classes_form">Classes</div> 
 
<div class="form" id="teachers_form">Teachers</div> 
 
<div class="form" id="students_form">Students</div> 
 
<div class="form" id="departments_form">Departments</div>

Answer 2

そうでない場合は、必ず初if年代に沿って最後の他の条件を実行します。

$(function() { 
     $("#reports").change(function() { 
     if ($("#subjects").is(":selected")) { 
      $("#subjects_form").show(); 
      $("#classes_form").hide(); 
      ... 
     } 
     else if ($("#classes").is(":selected")) { 
      $("#classes_form").show(); 
      $("#subjects_form").hide(); 
      ... 
     } 
     else if (...) { 
      ... 
     } 
     else { 
      $("#subjects_form").hide(); 
      $("#classes_form").hide(); 
      ... 
     } 
     }).trigger('change'); 
    });