動態替換下拉菜單選項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/