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

});

它几乎可以正常工作，但有一些小故障。

更新 我想我解决了。

解决了小提琴

谢谢谁帮忙。

问候

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 回答