使用淘汰赛重置下拉列表答案

【问题标题】：reset dropdownlist using knockout使用淘汰赛重置下拉列表
【发布时间】：2016-05-27 12:49:18
【问题描述】：

我对 Knockout 很陌生，当我选择默认选项时，我在重置级联下拉列表时遇到了问题。

这是我目前的代码

/// <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());
});

HTML

<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) 但这会清除下拉列表，包括默认值。有人可以给我指点或解释我需要做什么吗？

非常感谢

【问题讨论】：

你有默认值吗？您是否可以仅将 RangeOptions 设置为 self.RangeOptions(['My Default Value']) 之类的值？
嘿@feeeper，感谢您的评论。我没有默认值，但你确实给了我一个修复它的想法。我使用了self.RangeOptions([])，这对我来说是空白。非常感谢。我不知道您是否希望发布答案，我会将其标记为正确。
谢谢@feeeper。将其标记为已回答:)

标签： c# asp.net knockout.js

【解决方案1】：

如果你有默认值，你可以覆盖你的RangeOptions：

self.RangeOptions(['default value'])

否则，您可以像这样清除所有范围选项：

self.RangeOptions([])

【讨论】：