フォームの値に基づいて可視性を表示/非表示にする

私が行った選択に基づいてフォームdivを表示/非表示にしたい。私はすでにこれを行っていますが、同じコードに2つのフォームがあり、スクリプトが矛盾しているので、別のコードが必要です。フォームの値に基づいて可視性を表示/非表示にする

すでに動作しているコードは下記を参照してくださいが、既に持っているものと矛盾しない2番目のスクリプトが必要です。

<script type="text/javascript"> 
 
    $('#countries').on('change', function() { 
 
     if(['1'].indexOf(this.value) > -1) { 
 
      $('#state').prop('disabled', false).closest('div').show(); 
 
     } else { 
 
      $('#state').val('').prop('disabled', true).closest('div').hide(); 
 
     } 
 
    }) 
 
    .change(); 
 
</script>

<div> 
 
    <form> 
 
    <div class="form-row"> 
 
       <label> 
 
        <span>Job title<em>*</em></span> 
 
        <select name="dropdown"> 
 
         <option>Select job description</option> 
 
         <option>Select job description</option> 
 
         <option>Select job description</option> 
 
        </select> 
 
       </label> 
 
      </div> 
 
\t \t \t 
 
\t \t \t <div class="form-row"> 
 
       <label> 
 
        <span>Country<em>*</em></span> 
 
\t \t \t \t \t <select name="country_list" id="countries"> 
 
\t \t \t \t \t  <option value="">Please select</option> 
 
         <option value="1" selected="">USA</option> 
 
         <option value="2">Russia</option> 
 
         <option value="3">Canada</option> 
 
\t \t \t \t \t \t <option value="4">Brazil</option> 
 
\t \t \t \t \t \t <option value="4">UK</option> 
 
        </select> 
 
\t \t \t \t </label> 
 
\t \t \t 
 
\t \t \t <div class="form-row"> 
 
       <label> 
 
        <span>State</span> 
 
        <select name="state_field" value="" id="state"> \t \t \t 
 
         <option value="1" selected="">Alabama</option> 
 
         <option value="2">Alaska</option> 
 
         <option value="3">Arizona</option> 
 
\t \t \t \t \t \t <option value="4">Arkansas</option> 
 
\t \t \t \t \t \t <option value="5">California</option> 
 
\t \t \t \t  </select> 
 
       </label> 
 
      </div> 
 

 
      <div class="form-row"> 
 
       <button type="submit">Register</button> 
 
      </div> 
 
    </form> 
 
    </div>

出典

2016-10-14 Alina

私はあなたのコード内の1つのフォームを参照してください。 if（ 'change'、function（）{...}）; 'の中にifステートメントをラップして、フォームのidをパラメータとして渡す関数に入れることができます。あなたの選択にidsの代わりにクラスを使用し、この '$（ '＃' + formId + '.state'）のようなprop（）にパラメータを代入してください。 .show（）; ' –

まず第一に、あなたは両方のフォームのための要素（div要素、フォームやセレクタ）に同じID名を使用しないでください。

代わりに、class属性を使用してニーズに合わせることができます。常にjqueryセレクタを親フォームで参照します。


 
     $(function() { 
 
      $('.countries').on('change', function() { 
 
       if($(this).val() == '1') { 
 
        $(this).parent().find('.states').prop('disabled', false).show(); 
 
       } else { 
 
        $(this).parent().find('.states').val('').prop('disabled', true).hide(); 
 
       } 
 
      }); 
 
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<form id="form-1"> 
 
    <h3>Form 1</h3> 
 
    <select name="country_list" id="countries-1" class="countries"> 
 
     <span>Country</span> 
 
     <option value="">Please select</option> 
 
     <option value="1" selected="">USA</option> 
 
     <option value="2">Russia</option> 
 
     <option value="3">Canada</option> 
 
    </select> 
 

 
    <select name="state_field" value="" id="state-1" class="states"> 
 
     <span>State</span> 
 
     <option value="1" selected="">Alabama</option> 
 
     <option value="2">Alaska</option> 
 
     <option value="3">Arizona</option> 
 
    </select> 
 
</form> 
 

 

 
<form id="form-2"> 
 
    <h3>Form 2</h3> 
 

 
    <select name="country_list" id="countries-2" class="countries"> 
 
     <span>Country</span> 
 
     <option value="">Please select</option> 
 
     <option value="1" selected="">USA</option> 
 
     <option value="2">Russia</option> 
 
     <option value="3">Canada</option> 
 
    </select> 
 

 

 
    <select name="state_field" value="" id="state-2" class="states"> 
 
     <span>State</span> 
 
     <option value="1" selected="">Alabama</option> 
 
     <option value="2">Alaska</option> 
 
     <option value="3">Arizona</option> 
 
    </select> 
 
    
 
    
 
    
 
</form> 
 
    
 
    
 
    
 
    
 
    
 
</body>

出典

2016-10-14 00:51:34

フォームの値に基づいて可視性を表示/非表示にする

答えて

関連する問題