Question

我有两个选择，当第一个改变时，我正在重新创建第二个：

    _selectSubcategory : function (parent_id) {
        this.id('cat_select').find('option').remove().end();
        var option_list = [];
        option_list.push('<option selected value="0"></option>');
        $.each(this._data.categories, function (k, cat) {
            if (cat.parent_id == parent_id) {
                option_list.push('<option value="' + cat.cat_id + '">' + cat.cat_name + '</option>');
            }

        }.bind(this));

        this.id('cat_select').append(option_list.join('\n'));
}

我在这个选择的'change'事件中有一个事件监听器。

问题是每次拨打_selectSubcategory时都会触发此事件。我该如何解决？

Answer 1

如评论中所述，除非您删除当前选中的元素should work fine。

您可以在重新填充列表时添加条件以免除option[selected]，或者在操作整个<select>时期望它触发更改事件。

您可以使用.one加上.stopPropagation来忽略通过重新加载列表而触发的更改。类似的东西：

var $select = $('#options');
$('#add').click(function(e){
    var val = Math.floor(Math.random() * 1000),
        opt = 'option ' + val;
    $('<option>',{'value':'val','html':opt}).appendTo($select);
});
$('#reset').click(function(e){
    $select.one(function(e){
        e.stopPropagation();
    });
    var newopts = {
        '0': 'Please select one...',
        '1': 'Option 1',
        '2': 'Option 2',
        '3': 'Option 3'
    };
    var $lastOpt = $select.find('option').last(),
        newValue;
    // add the new options first
    $.each(newopts, function(v,k){
        if (!newValue) newValue = v;
        $('<option>',{'value':v,'html':k}).appendTo($select);
    });
    // change index once (.one will catch and suppress the change event)
    $select.val(newValue);
    // remove previous elements
    $lastOpt.add($lastOpt.prevAll()).remove();
});
$('#options').change(function(e){
    $('#debug').append('Change detected.\n');
});

更新示例：http://jsfiddle.net/pUyZ7/1/

添加要选择的选项时会触发“更改”

1 个答案: