KnockoutJS：动态填充下拉列表答案

【问题标题】：KnockoutJS: dynamically populate dropdownlistKnockoutJS：动态填充下拉列表
【发布时间】：2015-12-11 10:27:45
【问题描述】：

我是 KnockoutJS 的新手，我用下拉列表完成了简单的事情，填充和使用静态数据，但现在需要动态执行两件事下拉列表

1.想要动态填充下拉列表（比如任何列表），这个列表我们可以从我的控制器中获取。

        var InsertVal = function(name, id) {
            this.pname = name;
            this.pid = id;
            };

            var Valuess = function() {
            $.ajax({
            dataType: "json",
            url: "getParentCategory.do",
            success: function (data) {
            for(i=0;i<data.length;i++){
totalval.push(new InsertVal(data[i].parentCategoryName,data[i].parentCategoryId));
                }           
                handledata(totalval);
            }
              });   

                  };
        var handledata= function(totalval){
        console.log("!!@#"+totalval);
        return totalval;
    }



        var obj={
        parentCategory : ko.observableArray(Valuess()),
        chosenParentCategory : ko.observableArray()
        };

        ko.applyBindings(obj);


             <p>
             <select data-bind="options: parentCategory,
              optionsText: 'pname',
            value: chosenParentCategory,
            optionsCaption: 'Choose...'">
             </select>                
                               </p>

                <div data-bind="visible: chosenParentCategory">
                  You have chosen a Parent Category
                <span data-bind="text: chosenParentCategory() ?
 chosenParentCategory().pid : '0'"></span>.
                 </div>

尝试动态填充下拉列表，成功从控制器获取 json 数据但未填充数据。

【问题讨论】：

阅读并实施：knockoutjs.com/documentation/options-binding.html
@Java-DK，我已经通过了，但我没有找到这样做的方法，它可能以棘手的方式存在，但我无法通过它
StackOverflow 不是一个编码请求平台，如果您的代码有任何问题，我们只能提供帮助。 See what questions you can ask here.
填充下拉列表只是填充绑定到 <select> 的 observableArray 的问题。

标签： jquery ajax knockout.js drop-down-menu

【解决方案1】：

评论者是正确的，documentation 的存在可以指导您完成此操作，但这里有一个基本的（阅读：不完整和不完美的）fiddle 可以帮助您入门：

<select data-bind="options: Object.keys(viewModel.cars), optionsCaption: 'Select Make', value: make"></select>
<select data-bind="options: modelOptions, optionsCaption: 'Select Model', value: model"></select>

var viewModel = new (function() {
    var self = this;
    this.cars = {
        'Chevy': ['Camaro', 'Spark'],
        'Honda': ['Civic', 'Insight'],
        'Tesla': ['Model S', 'Model X']
    };

    this.make = ko.observable();
    this.model = ko.observable();
    this.makeOptions = Object.keys(this.cars);
    this.modelOptions = ko.computed(function() {
        return this.cars[this.make()];
    }, this);
})();

ko.applyBindings(viewModel);

http://jsfiddle.net/3ec7gocc/

【讨论】：

【解决方案2】：

您需要在这里解决各种问题。 1. 你应该把 obj 作为一个函数。 2. 您需要创建它的对象，然后在 ko.applyBindings 中使用该对象。 3. 你还没有声明 totalVal

您的代码应该类似于 jsFiddle 中的代码（请注意，我已经评论了您的 ajax 调用。您可以重新启用它）

Javascript：

var InsertVal = function (name, id) {
    this.pname = name;
    this.pid = id;
};

var Valuess = function () {
    var totalval = [];

    data = [{parentCategoryName : 'Parent1', parentCategoryId: 1},
           {parentCategoryName : 'Parent2', parentCategoryId: 2},
           {parentCategoryName : 'Parent3', parentCategoryId: 3}];

    for (i = 0; i < data.length; i++) {
                totalval.push(new InsertVal(data[i].parentCategoryName, data[i].parentCategoryId));
            }


    /*$.ajax({
        dataType: "json",
        url: "getParentCategory.do",
        success: function (data) {
            for (i = 0; i < data.length; i++) {
                totalval.push(new InsertVal(data[i].parentCategoryName, data[i].parentCategoryId));
            }
        }
    });*/

    return totalval;
}


var objViewModel = function() {
    var self = this;
    console.log(Valuess());
    self.parentCategory = ko.observableArray(Valuess());
    self.chosenParentCategory = ko.observableArray();
};

var obj = new objViewModel();
ko.applyBindings(obj);

HTML：

<p>
    <select data-bind="options: parentCategory,
              optionsText: 'pname',
            value: chosenParentCategory,
            optionsCaption: 'Choose...'"></select>
</p>
<div data-bind="visible: chosenParentCategory">You have chosen a Parent Category <span data-bind="text: chosenParentCategory() ?
 chosenParentCategory().pid : '0'"></span>.</div>

【讨论】：