如何在javascript中使用json将selectlist绑定到值

how to bind selectlist to value using json in javascript

本文关键字：selectlist 绑定 json javascript      更新时间：2023-09-26

我是web应用程序开发的新手，需要绑定从json对象中检索到的值。我尝试了几种方法，但无法将值绑定到组合框。

<script type="text/javascript">
     var ViewModel = {  
         CheckIn : ko.observable(),
         CheckOut: ko.observable(),
         Lunch: ko.observable(),
         Rest: ko.observable(),
         WorkOnProject: ko.observable(),
         Projects: ko.observableArray()
     };

this.GetProjects = function () {
    $.ajax({
        type: "POST",
        url: 'TimeRecord.aspx/ReturnComplexType',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (arg) {

            for (var i = 0; i < arg.d.length ; i++) {
                var value = arg.d[i].ProjectCode;
                var option = new Option(arg.d[i].ProjectCode, arg.d[i].ProjectCode);
                Select1.add(option, null);
            }
        },
        error: function (arg) {
        }
    });
};
ko.applyBindings(ViewModel);
</script>

我的HTML代码：

    <tr>
         <td class="auto-style1">Project Code </td> 
         <td ><select id="Select1" data-bind='options: Projects' style="width: 312px"></select>
               <button data-bind='click: GetProjects'>Cancel</button>
         </td> 
    </tr>

我的服务器端编码：

   [WebMethod]
        public static object ReturnComplexType()
        {
            List<Project> projects = new List<Project>();
            Project p = new Project();
            p.ProjectID = 1;
            p.ProjectCode = "ABC";
            p.ProjectName = "Test";
            projects.Add(p);
            Project p2 = new Project();
            p2.ProjectID = 2;
            p2.ProjectCode = "DEF";
            p2.ProjectName = "xsd";
            projects.Add(p2);
            return projects;
        }

您的结构太差了，您将对象实例与窗口对象上的函数混合在一起。。这是解决问题的一种方法

ViewModel = function() {
    this.CheckIn = ko.observable();
    this.CheckOut = ko.observable();
    this.Lunch = ko.observable();
    this.Rest = ko.observable();
    this.WorkOnProject = ko.observable();
    this.Projects = ko.observableArray()   
};
ViewModel.prototype = {
    GetProjects: function () {
        $.ajax({
            type: "POST",
            url: 'TimeRecord.aspx/ReturnComplexType',
            data: {},
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                this.Projects(data);
            }.bind(this),
            error: function (arg) {
            }
        });
    };
};
ko.applyBindings(new ViewModel());

我所做的是将GetProjects函数移动到模型对象

您的选择框绑定到Projects observable，但您没有设置显式文本/值

<select id="Select1" data-bind='options: Projects, optionsText: 'ProjectName', optionsValue:'ProjectID', value: SelectedProjectId"' style="width: 312px"></select>

如果您需要将值保存在某个地方，那么SelectedProjectId将是模型中另一个可观察到的值。

您要更改的另一件事是填充实际的可观察数组，而不是直接选择框。

<script type="text/javascript">
     function ViewModel() {  
         var self = this;
         self.CheckIn = ko.observable();
         self.CheckOut = ko.observable();
         self.Lunch = ko.observable();
         self.Rest = ko.observable();
         self.WorkOnProject = ko.observable();
         self.Projects = ko.observableArray();
     };
     var VM = new ViewModel();
     ko.applyBindings(ViewModel);

    $.ajax({
        type: "POST",
        url: 'TimeRecord.aspx/ReturnComplexType',
        data: {},
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (arg) {
            for (var i = 0; i < arg.d.length ; i++) {
                VM.Projects.push(d[i]);
            }
        },
        error: function (arg) {
        }
    });
</script>

在你把事情绑定好之后，你可能会想换掉VM.Projects.push（），换一种更快的方式。

当您在初始加载时填充数组时调用.push()会触发大量的通知，这些通知确实会使页面爬行。

相关文章：