动态替换下拉菜单选项jQuery

Question

我有一个下拉菜单，我想在点击事件中更改选项。 应删除当前选择选项并替换为新的选项数组。 这是小提琴 ：

而这是另一种修复它的尝试：

 $(document).ready(function () {
            var dropdown = $('<select>');
            dropdown.options = function (data) {
                var self = this;
                if (data.length > 0) {
                    //how to remove the current elements
                }
                $.each(data, function (ix, val) {
                    var option = $('<option>').text(val);
                    data.push(option);
                });
                self.append(data)
            }
            dropdown.clear = function () {
                this.options([]);
            }
            var array = ['one', 'two', 'three'];
            dropdown.options(array);
            $('body').append(dropdown);
            $('#btnSubmit').on('click', function (ix, val) {
                //should clear out the current options
                //and replace with the new array
                var newArray = ['four', 'five', 'six'];
                dropdown.clear();
                dropdown.options(newArray);
            });
        });

Answer 1

您需要做的就是将append()更改为html()因为html()替换了元素的现有内容

 dropdown.options = function (data) {
            var self = this;
            $.each(data, function (ix, val) {
                var option = $('<option>').text(val).val(val);/* added "val()" also*/
                data.push(option);
            });
            self.html(data)
        }

DEMO

Answer 2

要清除以下代码中的选择使用：

dropdown.empty();

http://jsfiddle.net/247z2/1/