Question

我有一个脚本，当我选择让我们说4项/人时，其他3个选择下拉列表最多只有4个项目可供选择。当我在其中一个选择下拉列表中选择3个项目时，我需要能够在剩下的两个选择下拉列表中仅选择1个剩余项目。

如果你看着我的小提琴，你可能会更清楚我的意思： http://jsfiddle.net/Pu5MU/

有谁知道我该怎么做？

jQuery.fn.filterOn = function(selectFrom, values) {
        return this.each(function() {
            var select = this;
            var options = [];
            $(select).find('option').each(function() {
                options.push({value: $(this).val(), text: $(this).text()});
            });
            $(select).data('options', options);
            console.log(selectFrom);
            $(selectFrom).change(function() {
                var options = $(select).empty().data('options');
                var haystack = values[$(this).val()];
                console.log(haystack);
                $.each(options, function(i) {
                    var option = options[i];
                    if($.inArray(option.value, haystack) !== -1) {
                        $(select).append(
                        $('<option>').text(option.text).val(option.value)
                        );
                    }
                });
            });            
        });
    };

    $(function() {
        $('#product1, #product2, #product3 ').filterOn('#personen', 
        {
            '0': ['0'],
            '1': ['0','1'],
            '2': ['0','1','2'],
            '3': ['0','1','2','3'], 
            '4': ['0','1','2','3' ,'4'],
            '5': ['0','1','2','3' ,'4' ,'5'], 
            '6': ['0','1','2','3' ,'4' ,'5' ,'6'],
            '7': ['0','1','2','3' ,'4' ,'5' ,'6', '7']        
        });
    }); 

<form action="" id="bestelformulier" onsubmit="return false;">
<select id="personen" onchange="berekenTotaal()">
  <option value="0">Aantal personen</option>
  <option value="1">1 Persoon</option>
  <option value="2">2 Personen</option>
  <option value="3">3 Personen</option>
  <option value="4">4 Personen</option>
  <option value="5">5 Personen</option>
  <option value="6">6 Personen</option>
  <option value="7">7 Personen</option> 
</select>


<select id="product1" onchange="berekenTotaal()">
  <option value="0">Geen</option>
  <option value="1">1 stuk</option>
  <option value="2">2 stuks</option>
  <option value="3">3 stuks</option>
  <option value="4">4 stuks</option>
  <option value="5">5 stuks</option>
  <option value="6">6 stuks</option>
  <option value="7">7 stuks</option>
</select>


<select id="product2" onchange="berekenTotaal()">
  <option value="0">Geen</option>
  <option value="1">1 stuk</option>
  <option value="2">2 stuks</option>
  <option value="3">3 stuks</option>
  <option value="4">4 stuks</option>
  <option value="5">5 stuks</option>
  <option value="6">6 stuks</option>
  <option value="7">7 stuks</option>
</select>

<select id="product3" onchange="berekenTotaal()">
  <option value="0">Geen</option>
  <option value="1">1 stuk</option>
  <option value="2">2 stuks</option>
  <option value="3">3 stuks</option>
  <option value="4">4 stuks</option>
  <option value="5">5 stuks</option>
  <option value="6">6 stuks</option>
  <option value="7">7 stuks</option>
</select>
<input type="submit" value="Verstuur">
</form>

Answer 1

解决

http://jsfiddle.net/Pu5MU/1/

JS的很多变化......不确定你需要什么。

var total = 0;
var hideAllAfterTotal = function(){
  var o = $(this), v = parseInt(this.value); 
  if(v > total) o.hide();
  else o.show();
};
$('#product1 > option').each(hideAllAfterTotal);
$('#product2 > option').each(hideAllAfterTotal);
$('#product3 > option').each(hideAllAfterTotal);

var berekenTotaal = function(){
  var s = $(this), i = this.id, v = parseInt(this.value);
  if(i == 'personen'){
    total = v;
  } else {
    total -= v;
  }
  $('#product1 > option').each(hideAllAfterTotal);
  $('#product2 > option').each(hideAllAfterTotal);
  $('#product3 > option').each(hideAllAfterTotal);
  $('#item').text(total);
};

$('#bestelformulier').on('submit', function(){return false;});

$('select').on('change', berekenTotaal);

选择3项时，请从3中选择

1 个答案: