JQueryを使用して、ドロップダウンの選択に基づいてdivを表示します。

Question

ドロップダウンボックスを非表示にして、divとdivの特定のセットを表示しようとしています。ドロップの

値がダウンしたdivの名前に対応

私の試み：

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
<script type="text/javascript"> 
    $(function() { 
     $("#submissionType").change(function() { 
      var submission = $(this).val(); 
      if ($(this).val()) { 
       $("#"+submission).show(); 
      } else { 
       $("#"+submission).hide(); 
      } 
     }); 
    }); 
    </script> 

HTML：あなたはそれらすべてを非表示にした後、明らかにすべきである

<select id="submissionType"> 
       <option>Choose Submission Type</option> 
       <option value="member-submission">member-submission</option> 
       <option value="researcher-submission">researcher-submission</option> 
       <option value="student-submission">student-submission</option> 
       <option value="paper-submission">paper-submission</option> 
      </select> 

<div class ="new-member-background"> 
    <div class ="member-submission" id="member-submission"> 
     <form action="SubmitData.php" method="post"> 
      <input type="text" name="first" placeholder="First Name" /> 
       <br/> 
      <input type="text" name="last" placeholder="Last Name" /> 
       <br/> 
      <input type="text" name="title" placeholder="Title" /> 
       <br/> 
      <input type="text" name="institution" placeholder="Institution" /> 
       <br/> 
      <input type="number" name="dept_code" placeholder="Department Code" /> 
       <br/> 
      <input type="text" name="division" placeholder="Division" /> 
       <br /> 
      <input type="text" name="email" placeholder="Email" /> 
       <br/> 
      <input type="text" name="website" placeholder="Website" /> 
       <br/> 
     <button type="submit" name="submit">Sign Up</button> 
     </form> 
</div> 
/**...Other divs...*/ 
</div> 

Answer 1

選択されたもの。 EG：

$(function() { 
 
    //hide them all to begin with. It would be easier if they all shared a classname. You could also do this in CSS) 
 
    $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide(); 
 
    //on change 
 
     $("#submissionType").change(function() { 
 
      var submission = $(this).val(); 
 
      //hide them all: 
 
      $("#member-submission, #researcher-submission, #student-submission, #paper-submission").hide(); 
 
      //show the selected one 
 
      $("#"+submission).show(); 
 
     }); 
 
    });

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<select id="submissionType"> 
 
       <option>Choose Submission Type</option> 
 
       <option value="member-submission">member-submission</option> 
 
       <option value="researcher-submission">researcher-submission</option> 
 
       <option value="student-submission">student-submission</option> 
 
       <option value="paper-submission">paper-submission</option> 
 
      </select> 
 

 
<div class ="new-member-background"> 
 
    <div class ="member-submission" id="member-submission"> 
 
     <form action="SubmitData.php" method="post"> 
 
      <input type="text" name="first" placeholder="First Name" /> 
 
       <br/> 
 
      <input type="text" name="last" placeholder="Last Name" /> 
 
       <br/> 
 
      <input type="text" name="title" placeholder="Title" /> 
 
       <br/> 
 
      <input type="text" name="institution" placeholder="Institution" /> 
 
       <br/> 
 
      <input type="number" name="dept_code" placeholder="Department Code" /> 
 
       <br/> 
 
      <input type="text" name="division" placeholder="Division" /> 
 
       <br /> 
 
      <input type="text" name="email" placeholder="Email" /> 
 
       <br/> 
 
      <input type="text" name="website" placeholder="Website" /> 
 
       <br/> 
 
     <button type="submit" name="submit">Sign Up</button> 
 
     </form> 
 
</div> 
 
/**...Other divs...*/ 
 
</div>