ドロップダウンからの複数の選択は、同じ操作を実行する必要があります - jQuery

Question

私はオプションA、B、C、Dを持つドロップダウンリストを持っています。ドロップダウンからの選択に基づいて他の入力フィールドを非表示にしたい

私が正常にフィールドを非表示にすることができ、ユーザは、私がいけないA.フィールドを非表示にする方法を知って選択した場合、ユーザはAまたはB

のいずれかを選択した場合

ワーキングコード：

$('#lockForm select[name="Key"]').change(function() { 
      if ($('#lockForm select[name="Key"] option:selected').val() == 'A') { 
       $('.hidden').hide(); 
      } else { 
       $('.hidden').show(); 
      } 
     }); 

<form:form method="post" id="lockForm"> 
     <div class="plselect"> 
      <form:select path="Key"> 
      <form:option value="NONE" label="------- Select One -------" /> 
      <form:options items="${List}" itemValue="Code" itemLabel="Desc"/> 
      </form:select> 
     </div> 
</form:form> 

Answer 1

あなただけで2つのチェックを作ることができますORを使用してif文：

if ($('#lockForm select[name="Key"] option:selected').val() == 'A' || '#lockForm select[name="Key"] option:selected').val() == 'B') 

あなたは

を言って、それをさらにクリーンアップができ

var selectedOption = $('#lockForm select[name="Key"] option:selected').val(); 
... 
if (selectedOption == 'A' || selectedOption == 'B') 

Answer 2

スクリプトはどの要素を非表示にするのか、オプション選択時に表示するのかをスクリプトに指示することで、完全な制御を得ることができます。あなたはオプションの要素にこのようにデータを追加することによってそれを行うことができます。

function showHide(e) { 
 
    var selectedOption = $(this).find('option:selected'); 
 
    $(selectedOption.data('hide')).hide(); 
 
    $(selectedOption.data('show')).show(); 
 
}; 
 
$('select') 
 
    .on('change', showHide) 
 
    .trigger('change');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p> 
 
    <select> 
 
     <option data-hide=".user-input" data-show=".user-input-a" value="A">show A</option> 
 
     <option data-hide=".user-input" data-show=".user-input-b" value="B">show B</option> 
 
     <option data-hide=".user-input" data-show=".user-input-c" value="C">show C</option> 
 
     <option data-hide=".user-input" data-show=".user-input-d" value="D">show D</option> 
 
     <option data-hide=".user-input" data-show=".user-input-a,.user-input-d" value="AD">show A and D</option> 
 
     <option data-hide=".user-input" data-show="" value="">hide all</option> 
 
     <option data-hide="" data-show=".user-input" value="ABCD">show all</option> 
 
    </select> 
 
</p> 
 
<p class="user-input user-input-a"> 
 
    A - any content 
 
</p> 
 
<p class="user-input user-input-b"> 
 
    B - any content 
 
</p> 
 
<p class="user-input user-input-c"> 
 
    C - any content 
 
</p> 
 
<p class="user-input user-input-d"> 
 
    D - any content 
 
</p>

追加だけで、あなたのページ上の任意の選択上の任意のより多くのJavascriptコードを変更する必要がそれを使用することはできません。この方法をHTMLの属性。

同上のコードはPlaygroundです。