根据以前的值绑定另一个下拉列表答案

【问题标题】：Bind another dropdowns as per previous values根据以前的值绑定另一个下拉列表
【发布时间】：2017-12-18 02:41:10
【问题描述】：

我总共有 4 个下拉列表...所有下拉列表都包含数字。

最后三个下拉菜单的最大数量始终等于在第一个下拉菜单中选择的数量。

If user selected 4 from 1st dropdown.

In this case all remaining dropdowns contain the values 0, 1, 2 ,3 and 4.

If customer selects 2 from 2nd dropdown then other two dropdowns will only show the values 0,1 and 2.

If customer selects 1 from 3rd dropdown then last should only show the values 0 and 1.

谁能帮我解决这个问题。提前致谢

我已经试过了

var tripChildSelect = $('#trip-child-count-range_0');
        var childRangeLength = "<?php echo $this->getChildRangeLength()?>";
        var j;

        for(j=1; j <= childRangeLength; j++ )
        {
            var childRange = $('#trip-child-count-range_' + j);
        }

        tripChildSelect.change(function() {
            tripChildSelect = $(this);
            availableChildren = tripChildSelect.data('max-count') - tripChildSelect.val();
            console.log(tripChildSelect.data('max-count') - tripChildSelect.val());
            if(tripChildSelect.data('max-count') - tripChildSelect.val() === 0) {
                for(j=1; j <= childRangeLength; j++ )
                {
                    var childRange = $('#trip-child-count-range_' + j);
                    childRange.prop('disabled', true);
                }
            } else {
                for(j=1; j <= childRangeLength; j++ )
                {
                    var childRange = $('#trip-child-count-range_' + j);
                    childRange.find('option').each(function (index, element) {
                        selectOption = $(element);
                        if(selectOption.val() <= availableChildren) {
                            selectOption.show();
                        } else {
                            selectOption.hide();
                        }
                    });
                    childRange.prop('disabled', false);
                }
            }
        }); 

        //disable if sum equals
        $('.trip-child-count-range').change(function() {
            // body...
            var sum = 0;
            $('.trip-child-count-range :selected').each(function() {
                sum += Number($(this).val());
            });
           // console.log('sum- '+sum);
            if(sum == $('#trip-child-count').val())
            {
                $('.trip-child-count-range').each(function() {
                    if($(this).val() == 0)
                        $(this).attr('disabled', true);
                });
            }
            else
            {
                $('.trip-child-count-range').each(function() {
                    if($(this).val() == 0)
                        $(this).attr('disabled', false);
                });
            }
          })

$('#trip-child-count').change(function() {
            // body...
            var i;
            for (i = 1; i <= $(this).val(); i++)
            { 
                 if ( $(".trip-child-count-range option[value='"+i+"']").length == 0 )
                 $('.trip-child-count-range').append( '<option value="'+i+'">'+''+i+'</option>' );
            }
            //set adta-max-xount
            $('#trip-child-count-range_0').data( "max-count", $(this).val());
           // console.log('hello' + $('#trip-child-count-range_0').data( "max-count"));

            //remove greater options
            $(".trip-child-count-range  option").each(function() {
                if($(this).val() > $('#trip-child-count').val()) 
                {
                    $(".trip-child-count-range option[value="+this.value+"]").remove();
                }
            });


            //added finalllu
            $('.trip-child-count-range').attr('disabled', false);
            $('.trip-child-count-range option[value=0]').attr('selected','selected');
            availableChildren = $('#trip-child-count').val();
        });

第一个下拉列表 ID：#trip-child-count

剩余 3 个下拉菜单的通用类：trip-child-count-range

【问题讨论】：

请展示你到目前为止所做的尝试
@RJParikh... 再次查看我的问题，我刚刚添加了我的代码
好的，在stackoverflow的sn-p代码中添加这段带有HTML的代码，这样我们就可以在你的代码中检查和解决

标签： javascript php jquery

【解决方案1】：

在这里，我提出了您的基本需求。首先使用 0-4 选项创建第一个下拉菜单，并将其他三个下拉菜单设为空。然后根据当前的下拉值将选项附加到其他下拉列表

    <!DOCTYPE html>
    <html>
    <body>
        <div>
            <select id="dropdown1">
                <option value="0">0</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <select id="dropdown2">         
            </select>
            <select id="dropdown3">
            </select>
            <select id="dropdown4">
            </select>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    
        <script>
            $(document).ready(function () {            
               $("#dropdown1").on("change",function(){
                var dd1 = parseInt($(this).val());
                $("#dropdown2, #dropdown3, #dropdown4").empty();
                for(var i=0;i<=dd1;i++){
                    $("#dropdown2, #dropdown3, #dropdown4").append('<option val='+i+'>'+i+'</option>');
                }               
              });

              $("#dropdown2").on("change",function(){
                var dd1 = parseInt($("#dropdown1").val());
                var dd2 = parseInt($(this).val());              
                $("#dropdown3, #dropdown4").empty();
                for(var i=0;i<=dd1-dd2;i++){
                    $("#dropdown3, #dropdown4").append('<option val='+i+'>'+i+'</option>');
                }               
              });

              $("#dropdown3").on("change",function(){
                var dd2 = parseInt($("#dropdown2").val());
                var dd3 = parseInt($(this).val());
                $("#dropdown4").empty();
                for(var i=0;i<=dd2-dd3;i++){
                    $("#dropdown4").append('<option val='+i+'>'+i+'</option>');
                }               
              });
            });    
        </script>
    </body>
    </html>

【讨论】：

感谢您的回答.. 但我想要最后三个下拉列表的最大数量始终等于在第一个下拉列表中选择的数量。如果您从第一个中选择 4，则用户可以从第二个中选择 0,1,2,3,4，如果用户从第二个中选择 3，则第三个下拉列表将只有 0 和 1，它应该始终是第一个下拉列表的总和
因此，附近的下拉列表应该具有基于前一个的值，然后其他应该为空。
因此，您需要监控其他下拉菜单值与第一个下拉列表的总和，并根据前一个下拉列表更新附近的下拉列表。
感谢您的回答...它无法正常工作...试试这个序列...第 1 -> 3 2nd -> 2 3rd -> 1 所以总和在这里完成.. 但仍然是第 4 个在下拉列表中显示 1 个值......它应该被禁用。再次感谢