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>

如何使第二个下拉隐藏在第一个下拉列表的选项中。 .Dropdown无法正常使用for循环

脚本代码：

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

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

Answer 1

你必须使用javascript。使用jQuery，这应该可以解决问题;只需用第二个下拉菜单的选择器替换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而只是一个类。

另外，如果你使用的是类，那么而不是

$(secondDropdownMenuSelector)

然后你必须使用

$(this).siblings(secondDropdownMenuSelector)

每次都要引用正确的下拉菜单。

Answer 2

给它一个机会!!

    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>

{{1}}

首先，我已将select的id属性更改为class，因为对多个选择框使用相同的id是不对的。现在我接下来做的事情是将div中的选择框括起来，从而我可以隐藏并使用jquery的父选择器显示div。看一看！！

如何使第二个下拉列表隐藏在第一个下拉循环中

2 个答案: