KnockoutJS：动态填充下拉列表 [英] KnockoutJS: dynamically populate dropdownlist

问题描述

我非常新手KnockoutJS，我已经做了简单的事情与下拉列表，填充和使用静态数据，但现在需要动态执行两件事情下拉列表

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

  var InsertVal = function ，id）{
 this.pname = name; 
 this.pid = id; 
}; 
 
 var Valuess = function（）{
 $ .ajax（{
 dataType：json，
 url：getParentCategory.do，
成功：function（data）{
 for（i = 0; i< data.length; i ++）{
 totalval.push（new InsertVal（data [i] .parentCategoryName，data [i] .parentCategoryId ））; 
} 
 handlesata（totalval）; 
} 
}）; 
 
}; 
 var handlesata = function（totalval）{
 console.log（!! @＃+ totalval）; 
返回总额; 
} 
 
 
 
 var obj = {
 parentCategory：ko.observableArray（Valuess（）），
 selectedParentCategory：ko.observableArray ）
}; 
 
 ko.applyBindings（obj）; 
 
 
< p> 
< select data-bind =options：parentCategory，
 optionsText：'pname'，
 value：selectedParentCategory，
 optionsCaption：'Choose ...'> 
< / select> 
< / p> 
 
< div data-bind =visible：selectedParentCategory> 
您已选择父类别
< span data-bind =text：chosenParentCategory（）？
 selectedParentCategory（）。pid：'0'>< / span> ;. 
< / div> 
  

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

解决方案

这里有很多你需要解决的问题。
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}]; （i = 0; i< data.length; i ++）{
 totalval.push（new InsertVal（data [i] .parentCategoryName，data [i] .parentCategoryId））
 
 ; 
} 
 
 
 / * $。ajax（{
 dataType：json，
 url：getParentCategory.do，
成功：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为H. 
< select data-bind =options：parentCategory，
 optionsText：'pname'，
 value：chosenParentCategory，
 optionsCaption：'Choose ...'>< ; /选择> 
< / p> 
< div data-bind =visible：selectedParentCategory>您已选择父类别< span data-bind =text：selectedParentCategory（）？
 selectedParentCategory（）。pid：'0 >< /跨度>。< / DIV> 
  

I am very newbie to KnockoutJS,I have done the simple things with dropdownlist, populating and using static data but now need to perform two things dropdownlist dynamically

1.Want to populate dropdownlist dynamically (say any list), this list we can get from my controller.

        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>

Trying to populate the dropdownlist dynamically, getting json data from controller successfully but data not getting populated.

解决方案

There are various things you need to address here. 1. You should make obj as a function. 2. You need to create its object and then use that object in ko.applyBindings. 3. you've not declared totalVal

your code should looks like as in this jsFiddle (note that i've commented your ajax call. you can enable it back)

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>

这篇关于KnockoutJS：动态填充下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！