javascript - JS - 根据计算禁用下拉选项

Question

我正在使用此代码创建一系列下拉列表，一次一个。

https://jsfiddle.net/mbus6w11/17/

我使用此代码禁用之前选择的选项:

$("select.options").change(function () {
    $("select.options option[value='" + $(this).data('index') + "']").prop('disabled', false);
    $(this).data('index', this.value);
    $("select.options option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
    $(this).find("option[value='" + this.value + "']:not([value=''])").prop('disabled', false);
    });

这创建了另一个数值 (varc)，该数值将添加到每个选项 (var3) 的总计(总和)中:

if (var3 == 1) {
    varc = 10;
    vartip = 'this is tip1';
} else if (var3 == 2) {
    varc = 20;
    vartip = 'this is tip2';
} else if (var3 == 3) {
    varc = 30;
    vartip = 'this is tip3';
} else if (var3 == 4) {
    varc = 40;
    vartip = 'this is tip4';
} else if (var3 == 5) {
    varc = 50;
...
};
sum += varc;
document.getElementById('result').innerHTML = sum;

但是我还需要隐藏基于复杂计算的选项。每次有一个选项会使总和超过 100 时，我也需要禁用它(在实际做出选择之前)

有什么办法可以实现这一点吗？

最诚挚的问候， 若昂

Answer 1

我的第一个选择是创建一个函数来检查启动和更改时的内容。

var checkOptions = function ()
{
  // here check the options that you want to be disabled based on your value sum
  $("select.options option").each(function () {
    // stuff
    // $(this).prop("disabled", true);
  });
};

$("select.options").change(function () {
  $("select.options option[value='" + $(this).data('index') + "']").prop('disabled', false);
  $(this).data('index', this.value);
  $("select.options option[value='" + this.value + "']:not([value=''])").prop('disabled', true);
  $(this).find("option[value='" + this.value + "']:not([value=''])").prop('disabled', false);
  checkOptions();
});

checkOptions();

我的下一个选择是使用 javascript 创建选择框，这样您就可以控制您想要在选择框内和外出现的任何选项以及更干净的东西。 https://jsfiddle.net/mbus6w11/22/

var sum = 0;
var options = [
  {
    id: 1,
    text: "Tip 1",
    value: 10
  },
  {
    id: 2,
    text: "Tip 2",
    value: 20
  },
  {
    id: 3,
    text: "Tip 3",
    value: 30
  },
  {
    id: 4,
    text: "Tip 4",
    value: 40
  },
  {
    id: 5,
    text: "Tip 5",
    value: 50
  }
];
var onSelect = function ()
{
  var id = parseInt(this.value);
  disableOption(id);

  sum += options.find(function(item)
  {
    if (item.id == id)
    {
      return item;
    }
  }).value;

  $(".sum").html(sum);

  // Disable the select
  $(this).attr("disabled", true);

  // Do the move
  createSelect();
};
var disableOption = function (id)
{
  options = options.map(function (item)
  {
    if (item.id == id)
    {
      item.disabled = true;
    }

    return item;
  });
};
var createOptions = function (select)
{
  var newOptions = [];
  for (var i = 0; i < options.length; i++)
  {
    var item = options[i];
    // here you can check what options should be in based on sum
    if ((sum + item.value) <= 100)
    {
     // Add item to available options
      newOptions.push(item);
    }
    // OR disable the item
    // {
    // item.disabled = true
    // newOptions.push(item);
    // }
  }

  for (var i = 0; i < newOptions.length; i++)
  {
    var optionData = newOptions[i];
    var option = $("<option></option>");
    $(option).attr("value", optionData.id);
    $(option).html(optionData.text);

    if (optionData.disabled)
    {
      $(option).attr("disabled", true);
    }

    $(select).append(option);
  }

  return newOptions.length > 0;
};
var createSelect = function ()
{
  var select = $("<select></select>");
  var hasOptions = createOptions(select);
  $(select).change(onSelect);

  // Do not create if there is no options to be displayed
  if (hasOptions)
  {
    $(".options").append(select);
  }
};

createSelect();

// HTML
// <div class="options"></div>

希望有帮助