0
    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>

How to make second drop down hide from the choices of first dropdown. .Dropdown not working properly to for loop

script code:

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

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

2 Answers 2

0

You would have to use javascript for this. Using jQuery, this should do the trick; just replace the secondDropdownMenuSelector value with a selector for your second dropdown menu (you could give it an id for example):

<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>

Although I see now that you are using a loop to output the dropdown menus multiple times. This will result in multiple elements having the same id. This can never be the case; IDs are intended to be unique. You either have to give each element a unique id (you could do that by concatenating 'purpose' with $i for example), or even better you should not use an id at all but rather a class.

Also, if you do use a class, then instead of

$(secondDropdownMenuSelector)

you would then have to use

$(this).siblings(secondDropdownMenuSelector)

in order to reference the correct dropdown menu every time.

1
  • Could you make a jsfiddle of it? This way it would be easier for us to help you.
    – pazof
    Jul 27, 2016 at 12:05
0

Give this a shot!!

$(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>
First of all i've changed id attribute of select to class as it's not right to use same id for multiple select boxes. Now next thing i've done is enclosed both the select boxes inside a div and thereby i'm able to hide and show the div using parent selector of jquery. Have a look!!

1
  • Edited html!! Try again Jul 27, 2016 at 9:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.