0

私は先週かそこらの間、次の問題を解決しようとしてきました.

これは私の最初の投稿であり、このフォーラムが私のベーコンを何度か救ってくれたので、ここに投稿することに決めました!

これは私がしたいことです：

ユーザーは、ドロップダウンからスカウトとリーダーの数を選択します。最初の 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>

提案やヒントはありますか？

よろしくお願いします

クリス

4

1 に答える 1

0

これが可能な解決策です。より一般的になるように調整して、コレクションからリストを生成することもできるかもしれませんが、それで始めることができると思います。

例 (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(); 
}
​
于 2012-11-06T13:04:34.993 に答える