複数の非表示フィールドをCSSとJavascriptで表示するにはどうすればいいですか？

Question

複数のHTMLフィールドを切り替える方法を知りたい場合は、ドロップダウンメニューから選択してください。

私は3つの選択肢を持つドロップダウンがあるとしましょう：Branch、Region、& Division。

ブランチを選択した場合、ブランチ＃、サイト＃、ID＃の3つのフィールドがその下に表示されます。

私は非常に早い段階で私のJavaScriptの知識ではので、私はこのようにそれを設定し、それが働いていない：

​​

とCSSを：

#BranchNum { 
    display: none; 
} 

#SiteNum { 
    display: none; 
} 

#IDNum { 
    display: none; 
} 

どのように上の任意のヘルプを1つの選択肢がドロップダウンから作成されたときに3つのフィールドをすべて切り替えることができるようにJavaScriptを再構成すると、大きな助けになります！前もって感謝します。

これは、ドロップダウンのためのHTMLです：

<div class="col-md-3"> 
    <div class="form-group"> 
     <label>Your Location</label> 
     <select name="YourLocation" class="form-control select2" style="width: 100%;" required> 
      <option value="" disabled selected>Select Your Location</option> 
      <option value="Branch">Branch</option> 
      <option value="Region">Region</option> 
      <option value="Division">Division</option> 
     </select> 
    </div><!-- /.form-group --> 
</div><!-- /.col --> 

と隠しフィールドのHTML：あなたは、クラスの代わりに、IDなどを用いて、このたくさんを簡素化することができます

<div class="col-md-3"> 
    <div class="form-group"> 
     <label></label> 
     <input type="text" class="form-control" name="BranchNumber" placeholder="Branch #" id="BranchNum"> 
    </div> 
</div><!-- /.col --> 

<div class="col-md-3"> 
    <div class="form-group"> 
     <label></label> 
     <input type="text" class="form-control" name="SiteNumber" placeholder="Region #" id="SiteNum"> 
    </div> 
</div><!-- /.col --> 

<div class="col-md-3"> 
    <div class="form-group"> 
     <label></label> 
     <input type="text" class="form-control" name="IDNumber" placeholder="Division #" id="IDNum"> 
    </div> 
</div><!-- /.col --> 

Answer 1

そう：

$('select[name=YourLocation]').change(function() { 
 
    if ($(this).val() == 'Branch') { 
 
    $('.BranchInfo').show(); 
 
    } else { 
 
    $('.BranchInfo').hide(); 
 
    } 
 
});

.BranchInfo { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label>Your Location</label> 
 
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required> 
 
     <option value="" disabled selected>Select Your Location</option> 
 
     <option value="Branch">Branch</option> 
 
     <option value="Region">Region</option> 
 
     <option value="Division">Division</option> 
 
    </select> 
 
    </div> 
 
    <!-- /.form-group --> 
 
</div> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control BranchInfo" name="BranchNumber" placeholder="Branch #" id="BranchNum"> 
 
    </div> 
 
</div> 
 
<!-- /.col --> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control BranchInfo" name="SiteNumber" placeholder="Region #" id="SiteNum"> 
 
    </div> 
 
</div> 
 
<!-- /.col --> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control BranchInfo" name="IDNumber" placeholder="Division #" id="IDNum"> 
 
    </div> 
 
</div>

隠す/表示する各要素にクラスBranchInfoを追加すると、jQueryスクリプトはすべての要素を一度に切り替えます。

Answer 2

コードを作成し、すべてのif/elseステートメントを1つにまとめると、これがあります。あなたのコードから

$("select[name='YourLocation']").on("change", function() { 
 
    console.log($(this).val()) 
 
    if ($(this).val() == 'Branch') { 
 
    $('#BranchNum').show(); 
 
    $('#SiteNum').show(); 
 
    $('#IDNum').show(); 
 
    } else { 
 
    $('#BranchNum').hide(); 
 
    $('#SiteNum').hide(); 
 
    $('#IDNum').hide(); 
 
    } 
 
});

#BranchNum, 
 
#SiteNum, 
 
#IDNum { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label>Your Location</label> 
 
    <select name="YourLocation" class="form-control select2" style="width: 100%;" required> 
 
     <option value="" disabled selected>Select Your Location</option> 
 
     <option value="Branch">Branch</option> 
 
     <option value="Region">Region</option> 
 
     <option value="Division">Division</option> 
 
    </select> 
 
    </div> 
 
    <!-- /.form-group --> 
 
</div> 
 
<!-- /.col --> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control" name="BranchNumber" placeholder="Branch #" id="BranchNum"> 
 
    </div> 
 
</div> 
 
<!-- /.col --> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control" name="SiteNumber" placeholder="Region #" id="SiteNum"> 
 
    </div> 
 
</div> 
 
<!-- /.col --> 
 

 
<div class="col-md-3"> 
 
    <div class="form-group"> 
 
    <label></label> 
 
    <input type="text" class="form-control" name="IDNumber" placeholder="Division #" id="IDNum"> 
 
    </div> 
 
</div> 
 
<!-- /.col -->

Answer 3

あなたはjqueryのを使用しているように見えます。 jquery .show()を使用して、表示する要素を表示し、.hide()を使用して、ifブロックで条件が満たされたときに他の2つを非表示にすることができます。

if(conditions) { 
    $('#elementToShow').show(); 
    $('#elementTohide1').hide(); 
    $('#elementTohide').hide(); 
} 

およびその他の要素のための正しい条件と同じ操作を行います。のような

何か。

Answer 4

$('select[name=YourLocation]').change(function() { 
    if ($(this).val() == 'Branch') { 
      $('#BranchNum, #SiteNum, #IDNum').show(); 
    } else { 
      $('#BranchNum, #SiteNum, #IDNum').hide(); 
    } 
});