ループの最初のドロップダウンから2番目のドロップダウンを作る方法

Question

for ($i = 0; $i <= $member_count - 1; $i++) { 
     ?> 
     <select id='purpose' name="member[<?= $i ?>][health_status]"> 
     <option value=""></option> 
     <option value="0">Perfect</option> 
     <option value="1">Not well</option> 
     </select> 
    <div id='health'> 
     <label>Illness If Any:</label> 
     <select name="member[<?= $i ?>][illness_type]"> 
     <option value=""></option> 
     <option value="0">Diabetes</option> 
     <option value="1">BP</option> 
     <option value="2">Head</option> 
     </select> 
</div> 

最初のドロップダウンの選択肢から2番目のドロップダウンを作る方法。

<script> 
       $(document).ready(function() { 
        $('#purpose').on('change', function() { 
         if (this.value == 'Perfect') 
         { 
          $("#health").hide(); 

         } else 
         { 
          $("#health").show(); 
         } 
        }); 
       }); 
      </script> 

Answer 1

あなたはこのためにJavaScriptを使用しなければならないでしょう：.Dropdown forループ

スクリプトコードに正常に動作していません。 jQueryを使用して、これはトリックを行う必要があります。ちょうどあなたの2番目のドロップダウンメニューのセレクタでsecondDropdownMenuSelector値を置き換える（あなたはそれを例えばIDを与えることができる）：

<script type="text/javascript"> 

    $document).ready(function(){ 

     secondDropdownMenuSelector = "yourSelectorHere"; 

     $("#purpose").on("change", function(){ 
      if($(this).val()=='1' && $(secondDropdownMenuSelector).is(":hidden")){ 
       $(secondDropdownMenuSelector).show(); 
      } 
      else if ($(this).val()=='0' && $(secondDropdownMenuSelector).is(":visible")) { 
       $(secondDropdownMenuSelector).hide(); 
      }//end if 
     }); 
    }); 

</script> 

私はあなたが出力にドロップダウンメニューを複数回ループを使用していることを今見ているが

。これにより、同じidを持つ複数の要素が生成されます。これは決して可能ではありません。 IDは一意であることを意図しています。あなたはそれぞれの要素に一意のIDを与えなければなりません（例えば、 '目的'を$ iと連結することで可能です）。あるいはidをidではなくむしろクラスとして使うべきです。

また

、あなたがクラスを使用する場合は、代わりに

$(secondDropdownMenuSelector) 

のあなたは正しいドロップダウンメニューを毎回参照するために

$(this).siblings(secondDropdownMenuSelector) 

を使用しなければならないでしょう。

Answer 2

これを打つ！

$(document).ready(function() { 
 
        $('.purpose').on('change', function() { 
 
         if (this.value == 'Perfect') 
 
         { 
 
          $(this).parents(".select_container").find("#health").hide(); 
 

 
         } else 
 
         { 
 
          $(this).parents(".select_container").find("#health").show(); 
 
         } 
 
        }); 
 
});

for ($i = 0; $i <= $member_count - 1; $i++) { 
 
     ?> 
 
<div class="select_container"> 
 
     <select class='purpose' name="member[<?= $i ?>][health_status]"> 
 
     <option value=""></option> 
 
     <option value="0">Perfect</option> 
 
     <option value="1">Not well</option> 
 
     </select> 
 
    <div class='health'> 
 
     <label>Illness If Any:</label> 
 
     <select name="member[<?= $i ?>][illness_type]"> 
 
     <option value=""></option> 
 
     <option value="0">Diabetes</option> 
 
     <option value="1">BP</option> 
 
     <option value="2">Head</option> 
 
     </select> 
 
    </div> 
 
</div>

それは、複数の選択ボックスに同じIDを使用する権利はないと私はクラスの選択のid属性を変更したすべての最初の。私がやった次のことは、div内の選択ボックスの両方に囲まれているため、jqueryの親セレクタを使ってdivを非表示にすることができます。見てみましょう！