Question

我一直试图在上周左右解决以下问题，并且在互联网上进行了多次搜索之后，并且在这里找不到我想要实现的目标的确切解决方案。

这是我在这里的第一篇文章，并决定在这里发帖，因为这个论坛多次保存我的培根！

这就是我想要发生的事情：

用户从下拉菜单中选择侦察员和领导者的数量。第一个T恤（小）有总数领先者和球探。

如果用户从小下拉列表中选择较少的金额，则剩余金额用于填充中选择列表，依此类推至XXL。

下面的代码是到目前为止我已经走了多远，但似乎有点错误，如果用户改变主意，选项值会一次又一次地附加，而中间框显示总选项而不是总数 - 少量选择。

我不知道这是最好的方式还是有更好的解决方案？

这是

<form method='post' id="wawBooking" action='processWAWBooking.php' >
    <div id="groupDetails" >
        <fieldset>
            <legend>Group Details</legend>
            <label for="noScouts">Number of scouts:</label>
            <select id='noScouts' name="noScouts"></select><br />
            <label for="noLeaders">Number of leaders:</label>
            <select id='noLeaders' name="noLeaders"></select><br />
        </fieldset>
    </div>
    <div style="clear: both;"></div>
    <div id="tshirts">
        <fieldset style="height: auto;">
            <legend>T-Shirts</legend>
            Total: <span id='totalTshirts'></span><br />
            Amount left (Total - current total): <span id='amountLeft'></span><br />
            Sum of Selected: <span id='liveTotal'></span><br />
            <label for='s'>Small</label>
            <select id='s'></select><br />
            <label for='m'>Medium</label>
            <select id='m'> </select><br />
            <label for='l'>Large</label>
            <select id='l'></select><br />
            <label for='xl'>X-Large</label>
            <select id='xl'></select><br />
            <label for='xxl'>XX-Large</label>
            <select id='xxl'></select><br />
        </fieldset>
    </div>
    <input type="reset" value="Reset Form" id="reset" style="float: left;"/>
    <input type="button" value="Order t-shirts" id="tshirtOrder" style="float: right;"/>
    <input type="submit" value="Submit Booking" style="float: right;"/>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript">
    var scouts = 20;
    var leaders = 30;

    // ignore this bit - using just to demonstrate
    for (a = 0; a <= leaders; a++) {
        $('#noScouts').append("<option value='" + a + "'>" + a + "</option>");
    }
    for (b = 0; b <= scouts; b++) {
        $('#noLeaders').append("<option value='" + b + "'>" + b + "</option>");
    }
    // end of ignore section!

    $('#wawBooking').change(function(){
        var totalTshirts = parseInt($('#noLeaders').val()) + parseInt($('#noScouts').val());
        var liveTotal = parseInt($('#s').val())
                      + parseInt($('#m').val()) 
                      + parseInt($('#l').val()) 
                      + parseInt($('#xl').val()) 
                      + parseInt($('#xxl').val());
        if ($('#noScouts').val() && $('#noLeaders').val() > 0) {
            $('#totalTshirts').empty().append(totalTshirts);
            $('#liveTotal').empty().append(liveTotal);
            for (i = 0; i <= totalTshirts; i++) {
                $('#s').append('<option value="' + i + '">' + i + '</option>')
            }
            if ($('#s').val() > 0 && $('#s').val() < totalTshirts) {
                var subSmallMinusTotal = parseInt(totalTshirts) - parseInt($('#s').val());
                for (k = 0; k <= subSmallMinusTotal; k++) {
                    $('#m').append('<option value="' + k + '">' + k  + '</option>')
                }           
            }
        } 
    });

</script>

有任何建议或提示吗？

非常感谢提前

克里斯

Answer 1

这是一个可能的解决方案。你可能能够将它调整为更通用并从集合中生成列表，但我认为它会让你开始。

Example (JsFiddle)

<强> HTML

<label for="noScouts">Number of scouts:</label>
<select id='noScouts' name="noScouts"></select><br />
<label for="noLeaders">Number of leaders:</label>
<select id='noLeaders' name="noLeaders"></select><br />
<label for="noSmall">s:</label>
<select id='noSmall' name="noSmall"></select>
<label for="noMed">m:</label>
<select id='noMed' name="noMed"></select>
<label for="noLarge">l:</label>
<select id='noLarge' name="noLarge"></select>
<label for="noXLarge">xl:</label>
<select id='noXLarge' name="noXLarge"></select>
<label for="noXXLarge">xxl:</label>
<select id='noXXLarge' name="noXXLarge"></select>

<强> JS

var sizes = $('#sizes'); 
var numScouts = new selectRange('#noScouts', { max: 30 }); 
var numLeaders = new selectRange('#noLeaders', { max: 20 }); 

var total = new watchVal(0); 
var small = new selectRange('#noSmall', { max: 0 }); 
var med = new selectRange('#noMed', { max: 0 }); 
var large = new selectRange('#noLarge', { max: 0 }); 
var xlarge = new selectRange('#noXLarge', { max: 0 }); 
var xxlarge = new selectRange('#noXXLarge', { max: 0 }); 

numScouts.change(zSetTotal); 
numLeaders.change(zSetTotal); 


total.change(function(e, total){
    small.setMax(total); 
}); 

small.change(function(){
   med.setMax(total.value() - small.value());
});

med.change(function(){
   large.setMax(total.value() - med.value() - small.value());
});

large.change(function(){
   xlarge.setMax(total.value() - med.value() - small.value() - large.value());
});

xlarge.change(function(){
   xxlarge.setMax(total.value() - med.value() - small.value() - large.value() - xlarge.value());
});

function zSetTotal(){
    total.value(numScouts.value() + numLeaders.value()); 
}

function watchVal(initVal){
    var _val = initVal; 
    var $_ctx = $(this); 
    $_ctx.value = function(newVal){
        if(newVal){
            _val = newVal;   
            $_ctx.trigger('change', _val);            
        }else{
            return _val;    
        }
    }    
    return $_ctx;         
}

function selectRange(selector, options){
    var _config = {
        max: 10               
    };
    var _select = null; 
    var _ctx = this; 

    function zInit(){
        $.extend(_config, options); 
        if($(selector).is('select')){
            _select = $(selector); 
        }else{
            _select = $('<select />'); 
            _select.appendTo(selector); 
        }
        _ctx.repaint(); 
    }            

    this.setMax = function(max){
        _config.max = max;       
        this.repaint();     
        _select.trigger('change');
    };

    this.repaint = function(){
        var prevPos = _select.find('> option:selected').index();         
        _select.empty(); 
        for (var i = 0; i <= _config.max; i++) {
            var option = $("<option />", {
                'value': i,
                'text': i        
            });

            _select.append(option); 
            if(i === prevPos){
                option.prop('selected', true);                   
            }
        }
    };

    this.value = function(){
        return parseInt(_select.val(), 10);             
    };

    this.change = function(fun){
        _select.change(fun);         
    };

    zInit(); 
}

动态创建多个选择列表选项并减少后续选择列表

1 个答案:

Example (JsFiddle)