按文本值剔除选定的选项

Question

我有一个应用程序，允许用户制作具有多个课程区域的课程。从选择下拉列表中选择课程区域。该列表使用敲除进行数据绑定。

HTML

<select id="courseAreaType" name="selectCourseArea" class="form-control" data-bind="options:$parent.courseAreaTypes, optionsText: 'name', optionsValue:'id', optionsAfterRender:$parent.setIconPath, value:typeid"></select>

我需要做的是在加载课程时，加载我已经完成的不同课程区域。对于每个课程区域，它需要将其值加载到其各种控件中。

我已经能够使用数据库中的值列表加载选择下拉菜单，并允许当用户选择一个选项并保存课程区域时，它会成功保存课程区域名称。

现在我需要做的是，当再次加载每个课程区域时，它会根据 courseArea.Name 从下拉列表中选择选项

淘汰赛

var CourseViewModel = function (courseIn) {
    var self = this;
    if (courseIn === undefined) {
        courseIn = {};
    }

    self.id = courseIn.Id;
    self.name = ko.observable(courseIn.Name);
    self.postalCode = ko.observable(courseIn.PostalCode);
    self.city = ko.observable(courseIn.City);
    self.province = ko.observable(courseIn.Province);
    self.courseId = ko.observable(courseIn.CourseId);
    self.courseAreas = ko.observableArray();
    self.courseAreaTypes = ko.observableArray();

    $.each(courseIn.CourseAreas, function(index, courseArea) {
        self.courseAreas.push(new CourseAreaViewModel(courseArea));
    });

    $.getJSON("/Course/GetCourseAreaTypes", function (types) {
        $.each(types, function (index, type) {
            self.courseAreaTypes.push(new CourseAreaTypeViewModel(type));
        });
    });

    $.each(courseIn.CourseAreas, function (index, courseArea) {
        console.log(courseArea.Name);
        var list = $('#courseAreaType');
        var options = $('option', list); // This is where my problem is
    });

    self.setIconPath = function (option, courseAreaType) {
        $(option).data("icon",  courseAreaType.iconPath)
        //console.log($(option).data("icon"));
    }
}

var CourseAreaTypeViewModel = function (courseAreaTypeIn) {
    var self = this;

    if (courseAreaTypeIn === undefined) {
        courseAreaTypeIn = {};
    }

    self.id = courseAreaTypeIn.ID;
    self.name = courseAreaTypeIn.Name;
    self.iconPath = courseAreaTypeIn.iconPath;
}

var CourseAreaViewModel = function(courseAreaIn) {
    var self = this;
    if (courseAreaIn === undefined) {
        courseAreaIn = {};
    }
    self.id = courseAreaIn.Id;
    self.name = ko.observable(courseAreaIn.Name);
    self.acreage = ko.observable(courseAreaIn.Acreage);
    self.goals = ko.observable(courseAreaIn.Goals);
    self.typeid = ko.observable(courseAreaIn.TypeID);
    self.selectedOption = ko.observable();
}

我尝试根据获取元素 ID 来更改它，我尝试了 .val、.prop、.attr 没有任何成功。当我将数据记录到元素的控制台时，它没有在下拉列表中显示值，所以我有一种感觉是在脚本级别添加值，而 jquery 无法看到这些值。

Answer 1

对此的基本方法是，您需要将 select 元素的值绑定到一个 observable，该 observable 包含应选择的课程类型的 ID。

我做了一个简单的小提琴来展示这一点：

http://jsfiddle.net/9a1njj1g/2/

JS 是：

function CourseArea(types) {
   this.types = ko.observableArray(types);
   this.typeid = ko.observable(2); 
};


var types = [
    { id: 1, name: "one" },
    { id: 2, name: "two" },
    { id: 3, name: "three" }
];

ko.applyBindings(new CourseArea(types));

HTML 是：

<select data-bind="options: types, optionsText: 'name', optionsValue: 'id', value: typeid"></select>

要将它应用到您的代码中，我认为您无需做太多事情。也许稍微重构你的 JS，所以你只有在加载完所有 CourseAreaTypes 后才处理 CourseAreas：

$.getJSON("/Course/GetCourseAreaTypes", function (types) {
    // Load all the types first.
    $.each(types, function (index, type) {
        self.courseAreaTypes.push(new CourseAreaTypeViewModel(type));
    });

    // Continue here, to be sure you have a complete list of types to work with.
   $.each(courseIn.CourseAreas, function (index, courseArea) {
        self.courseAreas.push(new CourseAreaViewModel(courseArea));
    });
});

还要确保您在 CourseAreaViewModel.typeid 中选择的 ID 在 CourseAreaTypeViewModel.id 中具有等效的精确值。

并确保您的数据与代码匹配...例如，类型数据必须以大写形式提供其 ID，以便self.id = courseAreaTypeIn.ID 有用。如果不是，那么您将不会收到错误，因为 self.id 将被悄悄地设置为 undefined。

这是一个小提琴，展示了与课程、区域和类型一起使用的所有内容：

http://jsfiddle.net/vpe4ut3m/1/