javascript - 使其成为全部的100%

Question

我有3个下拉框，其中有10到100的值。我希望用户从所有下拉框中选择累积值100。 这意味着，如果我从第一个下拉框中选择 20，那么接下来的 2 个下拉列表应保留总共选择 100 的选项

到目前为止我所做的在这里:CHECK IT HERE (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);

});

它几乎可以工作，但有一些小错误。

更新 我想我解决了。

SOLVED FIDDLE

谢谢谁帮忙。

问候

Answer 1

改变:

if ($(this).val() >= 总计) {

至

if ($(this).val() > 总计) {

解决最多只能选择90%的问题

Working sample

更新

关于更改值，我可能会采取前瞻性方法并重置前向选择的值。像这样的东西:

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");
}

});

这基本上会重置链中比当前使用的选择框更靠前的选择项的值。

Working example

在执行禁用操作时，您还需要向前看。您应该只禁用当前选择链下游的选择列表中的项目。第一个选择列表应该始终能够选择任何值，并且以下选择基于该值进行过滤。这与上述方法非常吻合。