Question

组合框脚本位于底部，如果删除它，一切正常。

我似乎无法用Knockout Ajax给我的新内容刷新组合框。

HTML

    <div>
        <div class="cbp-content" id="didScreen">
            <div>
                <table width='100%'>
                    <thead>
                        <tr>
                            <th width='25%'>State</th>
                            <th width='25%'>City</th>
                            <th class='quantity' width='10%'>Quantity</th>
                            <th width='10%'></th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: items">
                        <tr>
                            <td>
                                <select class="combobox" data-bind="options: $parent.states, optionsText: 'name', value: state, optionsCaption: 'Select State'"></select>
                            </td>
                            <td>
                                <select class="combobox" data-bind="options: cities, optionsText: 'rc_abbr', optionsValue: 'id', value: city"></select>
                            </td>
                            <td>
                                <input name="quantity" data-bind="value: quantity" />
                            </td>
                            <td>
                                <button class="btn" data-bind="click: $parent.remove"><i class="icon-remove"></i>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <button class="btn" data-bind="click: newItem">Add Item</button>
        </div>
    </div>
</fieldset>

JavaScript（Knockout JS）

var Item = function () {
    var self = this;
    self.state = ko.observable();
    self.city = ko.observable();
    self.quantity = ko.observable();


    self.cities = ko.observableArray([]);
    self.state.subscribe(function (state) {
        self.city("");
        self.cities.removeAll();
        $.ajax({
            url: '/echo/json/',
            type: 'POST',
            data: {
                json: ko.toJSON([{"id":"29","rc_abbr":"ANCHORAGE"}]),
            },
            success: function (response) {
                self.cities(response);
            }
        });
    });
};

var ViewModel = function (states) {
    var self = this;
    self.states = states;
    self.items = ko.observableArray([new Item()]);

    self.newItem = function () {
        self.items.push(new Item());
    };
    self.remove = function (item) {
        self.items.remove(item);
    };
};

var usStates = [{
    name: 'ALASKA',
    abbreviation: 'AK'
}];

window.vm = new ViewModel(usStates);
ko.applyBindings(window.vm, document.getElementById('didScreen'));
$(".combobox").select2();

Answer 1

您必须在您创建的所有新组合框上再次呼叫.select2()。你现在只在DOM准备就绪时存在的组合框中调用它。

你可以改变这个：

self.newItem = function () {
    self.items.push(new Item());
};

对此：

self.newItem = function () {
    self.items.push(new Item());
    $(".combobox").not('.select2-container').select2();
};

级联select2 Combobox与Knockout JS

1 个答案: