无法检索网页上下拉框中某项的值

Unable to retrieve value of an of an item in dropdown box on a webpage

本文关键字：检索 网页 上下      更新时间：2023-09-26

我正在使用html5和Knockout Js的网页上工作，并试图将值插入到SQL表中，但由于某些原因，我无法获得下拉框中选择的项目的id

例如，我有以下SQL表

ProductOrder Product
1             VS
2             Netg
5             CCast        
5             Firefox
6             App

现在使用一个Html页面，我有一个textbox，我将在其中输入一个product name和一个dropdown box，在同一个表中有一个产品列表。当输入product name并从dropdown框中选择product时，应该从dropdown框中选择product的textbox和product order中插入product name。

我正在使用下面的脚本

    <td colspan="2"><input type="text" id="txbInput" placeholder="Product Name" data-bind="value: Product"/> 
    <td >
         <select data-bind="options: $root.datainput, optionsText: 'ProductName', optionsValue: 'ProductOrder',value: selectedPOrder,  optionsCaption: 'Product'">
         </select></td>
<td>
     <input type="button", onclick="ClearFields();" class="btn btn-success" data-bind="  click: add, visible: !loading()", value="Add Product"/>
</td>

淘汰赛JS 

 self.selectedPOrder = ko.observable();
    var porder = this.selectedPOrder();
    self.add = function (product) {
        var payload = { ProductName: this.Product(), ProductOrder: porder };
        $.ajax({
            url: '/odata/Products',
            type: 'POST',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }

由于某些原因，当我点击Add时，它会插入我在文本框中输入的product名称，但无论我在dropdown box中选择了哪个product，它都会在productorder中插入0。甚至脚本self.selectedPOrder()也不起作用。

View Model
var ProductViewModel = function (ProductContext) {
    var self = this;
    self.products = ko.observableArray();
    self.loading = ko.observable(true);
    self.displayMode = function (product) {
        if (product.Locked()) {
            return 'lock-template';
        } else if (product.Edit()) {
            return 'edit-template'
        }
        else {
            return 'read-template';
        }
        return 'read-template';
    }

    self.connected = ko.observable('');
    self.datainput = ko.observableArray();
    self.Product = ko.observable();
    self.selectedPOrder = ko.observable();
    //var porder = this.selectedPOrder();
    self.add = function (product) {
        var payload = { ProductName: this.Product(), ProductOrder: self.selectedPOrder() };
        $.ajax({
            url: '/odata/Products',
            type: 'POST',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }
    self.remove = function (product) {
        var conf = confirm("Are you sure you want to delete this record?");
        if (conf == true) {
            $.ajax({
                url: '/odata/Products(' + product.Id + ')',
                type: 'DELETE',
                contentType: 'application/json',
                dataType: 'json'
            });
        }
    }
    self.edit = function (product) {
        product.Edit(true);
        ProductContext.server.lock(product.Id);
    }
    self.done = function (product) {
        product.Edit(false);
        ProductContext.server.unlock(product.Id);
    }
    self.watchModel = function (model, callback) {
        for (var key in model) {
            if (model.hasOwnProperty(key) && ko.isObservable(model[key]) && key !== 'Locked' && key != 'Edit') {
                self.subscribeToProperty(model, key, function (key, val) {
                    callback(model, key, val);
                });
            }
        }
    }
    self.subscribeToProperty = function (model, key, callback) {
        model[key].subscribe(function (val) {
            callback(key, val);
        });
    }
    self.modelChanged = function (model, key, val) {
        var payload = {};
        payload[key] = val;
        $.ajax({
            url: '/odata/Products(' + model.Id + ')',
            type: 'PATCH',
            data: JSON.stringify(payload),
            contentType: 'application/json',
            dataType: 'json'
        });
    }

    $.ajax({
        dataType: "json",
        url: '/odata/Products',
        data: ko.toJSON(self.products),
        async: false,
        success: function (data) {
            self.datainput((ko.utils.arrayMap(data.value, function (product) {
                var obsProduct = {
                    Id: product.Id,
                    ProductName: ko.observable(product.ProductName),
                    ProductOrder: ko.observable(product.ProductOrder),
                    Edit: ko.observable(false),
                    Locked: ko.observable(product.Locked)
                }
                self.watchModel(obsProduct, self.modelChanged);
                return obsProduct;
            })));
        }
    });

    $.getJSON('/odata/Products', function (data) {
        self.products(ko.utils.arrayMap(data.value, function (product) {
            var obsProduct = {
                Id: product.Id,
                ProductName: ko.observable(product.ProductName),
                ProductOrder: ko.observable(product.ProductOrder),
                Edit: ko.observable(false),
                Locked: ko.observable(product.Locked)
            }
            self.watchModel(obsProduct, self.modelChanged);
            return obsProduct;
        }));
        self.loading(false);
    });
}
$(function () {
    var productSignalR = $.connection.product;
    var viewModel = new ProductViewModel(productSignalR);
    var findProduct = function (id) {
        return ko.utils.arrayFirst(viewModel.products(), function (item) {
            if (item.Id == id) {
                return item;
            }
        });
    }
    productSignalR.client.addProduct = function (product) {
        var obsProduct = {
            Id: product.Id,
            ProductName: ko.observable(product.ProductName),
            ProductOrder: ko.observable(product.ProductOrder),
            Edit: ko.observable(false),
            Locked: ko.observable(product.Locked)
        }
        viewModel.products.push(obsProduct);
        viewModel.watchModel(obsProduct, viewModel.modelChanged);
    }
    productSignalR.client.removeProduct = function (id) {
        viewModel.products.remove(function (item) { return item.Id == id });
    }
    productSignalR.client.updatedProduct = function (id, key, value) {
        var product = findProduct(id);
        product[key](value);
    }
    productSignalR.client.lockProduct = function (id) {
        var product = findProduct(id);
        product.Locked(true);
    }
    productSignalR.client.unlockProduct = function (id) {
        var product = findProduct(id);
        product.Locked(false);
    }
    productSignalR.client.newConnection = function (id) {
        viewModel.connected(id + ' connected.');
    }
    ko.applyBindings(viewModel);
    $.connection.hub.start();
});

我可以知道我错在哪里，为什么它插入一个零

您可能需要使用$root.selectedPOrder 

<select data-bind=" options: $root.datainput, 
                    optionsText: 'ProductName', 
                    optionsValue: 'ProductOrder',
                    value: $root.selectedPOrder,  
                    optionsCaption: 'Product'">
</select>

在self中访问所选值。添加如下函数

   self.add = function (product) {
    var payload = { ProductName: this.Product(), ProductOrder: self.selectedPOrder() };
    $.ajax({
        url: '/odata/Products',
        type: 'POST',
        data: JSON.stringify(payload),
        contentType: 'application/json',
        dataType: 'json'
    });
}
相关文章：