Question

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

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

根据先前的值

1 个答案: