Question

我有以下代码：

$selectsPersons = $('select.persons');

// when user adds a select
$('#button-add-select').on('click', function (e) {
    $('#container-selects').append('<select class="persons"><option value="" selected="" disabled="disabled" data-placeholder="Fach">Fach</option><option value="1">Person 1</option><option value="2">Person 2</option><option value="3">Person 3</option></select>');
});

// when user changes persons in a select
$('body').on('change', 'select.persons', function () {
    $selectsPersons.find('option').prop('disabled', false);

    $selectsPersons.each(function () {
        $selectsPersons.not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
    });

    $selectsPersons.selectmenu('refresh', true);
});

用户可以在div中添加多个选择。当用户在选择菜单中更改人物时，其他选择菜单中已经选择的人将显示为禁用。

如何在“改变人”中实现这一目标？功能，我的变量$selectsPerson将涵盖 所有选择在目前为止添加更改人员的时刻？当然我可以简单地用$（＆＃39; select.persons＆＃39;）替换$ choicesPerson，但我的目标是能够简单地使用我在脚本开头声明的变量$ choicesPerson。

Answer 1

在追加新的选择元素后，只需覆盖它。

var $selectsPersons = $('select.persons');

// when user adds a select
$('#button-add-select').on('click', function (e) {
    $('#container-selects').append('<select class="persons"><option value="" selected="" disabled="disabled" data-placeholder="Fach">Fach</option><option value="1">Person 1</option><option value="2">Person 2</option><option value="3">Person 3</option></select>');
    $selectsPersons = $('select.persons');
});

// when user changes persons in a select
$('body').on('change', 'select.persons', function () {
    $selectsPersons.find('option').prop('disabled', false);

    $selectsPersons.each(function () {
        $selectsPersons.not(this).find('option[value="' + this.value + '"]').prop('disabled', true);
    });

    $selectsPersons.selectmenu('refresh', true);
});

（请注意，我添加了var关键字。如果您未在变量名称前添加var关键字，它将成为全局关键字

在ajax之后重新初始化jquery中的变量？

1 个答案: