按文字值敲除选定的选项

Question

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

HTML

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

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

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

现在我需要做的是当每个课程区再次加载时，它会从下拉列表中选择基于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无法看到这些值。< / p>