使用敲除重置下拉列表

Question

我对Knockout非常陌生，当我选择默认选项时，我的级联下拉列表被重置了。

这是我目前的代码

JS

/// <reference path="../knockout/knockout-3.4.0.debug.js" />
/// <reference path="../jquery/jquery.min.js" />

var deal = function () {
var self = this;

self.ManufacturerOptions = ko.observableArray();
self.VehicleManufacturerId = ko.observable();
self.RangeOptions = ko.observableArray();
self.VehicleRangeId = ko.observable();

var Deals = {

    ManufacturerOptions: self.ManufacturerOptions,
    VehicleManufacturerId: self.VehicleManufacturerId,
    RangeOptions: self.RangeOptions,
    VehicleRangeId: ko.observable(self.VehicleRangeId),

};

self.Deal = ko.observable();
self.Deals = ko.observableArray();
GetManufacturers();

function GetManufacturers() {
    $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetManufacturers',
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.ManufacturerOptions(dataReturned);
        }
    });
}

self.manufacturerChanged = function (obj, event) {
    var manufacturerId = $("#Manufacturer").val();
    GetRanges(manufacturerId);
}

function GetRanges(manufacturerId) {
    return manufacturerId ? $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetRanges?manufacturerCode=' + manufacturerId,
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.RangeOptions(dataReturned);
        }
    }) : null;
}
};

$(document).ready(function () {
    ko.applyBindings(new deal());
});

<h1>DealBook</h1>
<div data-bind="if: Deal">
<div>
    <h2>Update Deal</h2>
</div>
<div>
    <p>Manufacturer: <select id="Manufacturer" data-bind="options: ManufacturerOptions, optionsCaption: 'Select Manufacturer', optionsValue: 'cman_code', optionsText: 'cman_name', value: Deal().VehicleManufacturerId, event: { change: manufacturerChanged}"></select></p>
    <p>Range: <select id="Range" data-bind="options: RangeOptions, optionsCaption: 'Select Range', optionsValue: 'cran_code', optionsText: 'cran_name', value: Deal().VehicleRangeId, event: { change: rangeChanged }"></select></p>
</div>
</div>
<div id="dealCreateContainer" data-bind="ifnot: Deal()">
<div>
    <p>Manufacturer: <select id="Manufacturer" data-bind="options: ManufacturerOptions, optionsCaption: 'Select Manufacturer', optionsValue: 'cman_code', optionsText: 'cman_name', value: VehicleManufacturerId, event: { change: manufacturerChanged}"></select></p>
    <p>Range: <select id="Range" data-bind="options: RangeOptions, optionsCaption: 'Select Range', optionsValue: 'cran_code', optionsText: 'cran_name', value: VehicleRangeId, event: { change: rangeChanged }"></select></p>
</div>

​

我可以通过self.VehicleRangeId(null)设置范围的默认值，但我似乎不能清除下拉列表。我想我可能可以设置选项- self.RangeOptions(null)，但这会清除下拉列表，包括默认值。有人能给我一个指针或者解释我需要做什么吗？

非常感谢

Answer 1

如果您有默认值，您可以只覆盖您的RangeOptions

self.RangeOptions(['default value'])

否则，可以清除所有范围选项，如下所示：

self.RangeOptions([])