Question

如果下拉菜单从Ophalen更改为Bezorgen，那么我想更改下一个下拉菜单中的选项，如果他们将其从Bezorgen更改为Ophalen，则需要返回旧版本。

因此我尝试删除所有选项并使用新选项填充选择。但是当我更改另一个下拉菜单时，它们不会被删除，并且新选项也没有显示。

我的代码：

$(document).on('change', '#bezorgkosten', function(e) {
      var target = $('#bezorgkosten :selected').text();
      if (target == 'Ophalen') {
        var ophalen = [{
          val: '0.00',
          text: 'a'
        }, {
          val: '0.00',
          text: 'b'
        }];
        $('option', '#betaalmethode').clear();

        $(ophalen).each(function() {
          $('#betaalmethode').append($("<option>").attr('value', this.val).text(this.text));
        });
      }


      if (target == 'Bezorgen' || 'Bezorgen op ander adres') {
        var bezorgen = [{
          val: '0.00',
          text: 'IDEAL'
        }, {
          val: '1.50',
          text: 'PayPal'
        }, {
          val: '2.45',
          text: 'CreditCard'
        }];
        $('option', '#betaalmethode').remove();

        $(bezorgen).each(function() {
          $('#betaalmethode').append($("<option>").attr('value', this.val).text(this.text));
        });
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id='bezorgkosten'>
  <option value='0.00'>Ophalen</option>
  <option value='<?= $s_BezorgKosten ?>'>Bezorgen</option>
  <option value='<?= $s_BezorgKosten ?>'>Bezorgen op ander adres</option>
</select>

<select id='betaalmethode'>

</select>

只有它在JsFiddle上不适合我，因为前三个选项没有来自@JsFiddle但是在我的网站上显示。

Answer 1

看看这个jsfiddle http://jsfiddle.net/3jwdw3np/1/

我有两个选择框。当您更改第一个选择框时，第二个选择框会根据变量arr进行更改。

在添加新选项之前，您需要使用$('#two').html("");清除任何选择框。

$(arr).each

的快速解释

$(arr).each(function (index, item) {
    // make a new option element
    var option = $('<option>');

    // add the attribute and text to the option
    option.attr('value', item.val).text(item.text);

    // append the option to the second select box
    $('#two').append(option);
});

也许这对你有用吗？

编辑：

如果您想要两个选项来生成相同的结果，那么您可以执行此操作：http://jsfiddle.net/3jwdw3np/2/

注意第二个if语句：

if (this.value == 'Option 2 || this.value == 'Option 3')

Answer 2

我猜你的错误来自这里：

$('option', '#betaalmethode').clear();

它会触发错误，因为.clear()方法不是jQuery的一部分。只需使用.remove()，就像在代码中做得更远：

$('option', '#betaalmethode').remove();

<强> demo

从选择中清除所有选项并进行更改

2 个答案: