0

3つのドロップダウンボックスがあり、10から100の値があります。ユーザーがすべてのドロップダウンボックスから累積値100を選択するようにします。つまり、最初のドロップダウンボックスから20を選択した場合、次の2つのドロップダウンには、合計100を選択するオプションが表示されます。

私がこれまでに行ったことはここにあります：ここでそれをチェックしてください（JS FIDDLE）

HTML 

<select id="foreign" class="me">
    <option value="">Foreign Policy</option>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option>
    <option value="40">40%</option>
    <option value="50">50%</option>
    <option value="60">60%</option>
    <option value="70">70%</option>
    <option value="80">80%</option>
    <option value="90">90%</option>
    <option value="100">100%</option>
</select>
<select id="economy" class="me">
    <option value="">Economy Policy</option>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option>
    <option value="40">40%</option>
    <option value="50">50%</option>
    <option value="60">60%</option>
    <option value="70">70%</option>
    <option value="80">80%</option>
    <option value="90">90%</option>
    <option value="100">100%</option>
</select>
<select id="social" class="me">
    <option value="">Social Policy</option>
    <option value="10">10%</option>
    <option value="20">20%</option>
    <option value="30">30%</option>
    <option value="40">40%</option>
    <option value="50">50%</option>
    <option value="60">60%</option>
    <option value="70">70%</option>
    <option value="80">80%</option>
    <option value="90">90%</option>
    <option value="100">100%</option>
</select>
<br />

<span id="message"></span>

JavaScript 

/*var total = new Array();
$('#foreign option').each(function() {
    total.push($(this).val());
});

console.log(total);*/

var total = 100;
var ids = ['foreign', 'social', 'economy'];
var current_selected;

$('.me').change(function() {
    current_selected = $(this).attr('id');
    var socval = $('#' + current_selected + ' option:selected').val();
    total = total - socval;

    if ($.inArray($(this).attr('id'), ids) > -1) {
        ids.splice($.inArray($(this).attr('id'), ids), 1);

    }

    for (var i = 0; i < ids.length; i++) {

        $('#' + ids[i] + ' option').each(function() {

            if ($(this).val() >= total) {

                    $(this).attr('disabled', true);

            } else {
                $(this).attr('disabled', false);
            }

        });

    }


    if (total <= 0) {
        total = 100;
    }
    console.log(total);

    ids.push(current_selected);

});

いくつかの小さな欠点はありますが、ほとんど機能しています。

UPDATE 私はそれを解決したと思います。

解決されたフィドル

助けてくれてありがとう。

よろしく

4

2 に答える 2

2

変化：

if ($(this).val() >= total) {

に

if ($(this).val() > total) {

90%までしか選択できない問題を解決

作業サンプル

アップデート

値の変更に関しては、おそらく前向きなアプローチを取り、前方選択の値をリセットします。何かのようなもの：

var selectIds = ['first', 'second', 'third']

$('select').change(function(){
var currentIndex = $.inArray($(this).attr('id'), selectIds);

for(var i = currentIndex + 1; i < selectIds.length; i++)
{
    $('#' + selectIds[i]).val("0");
}

});

これは基本的に、現在使用されている選択ボックスよりも先にあるチェーン内の選択項目の値をリセットします。

実施例

無効にするときは、先を見据えることも必要です。現在の選択からチェーンをさらに下った選択リストの項目のみを無効にする必要があります。最初の選択リストは常に任意の値を選択できる必要があり、次の選択はそれに基づいてフィルタリングされます。これは、上記のアプローチとうまく適合します。

于 2012-05-18T07:28:05.770 に答える
0

私はあなたのコードの別のバージョンを実行し、さらにバグを修正しました

http://jsfiddle.net/rzBej/62/

$('.me').change(function() {
    var totalSoFar = 0;
    $('.me').each(function() {
        totalSoFar += +$(this).val();
    });

    var tmp = 100 - totalSoFar;
    $('.me').each(function() {
        var $this = $(this);
        $this.find('option').each(function() {
            $this.prop('disabled', $this.attr('value') > tmp);
        });
    })
});​
于 2012-05-18T07:58:24.930 に答える