Javascript 删除填充下拉列表更改时的字段

我是击倒JS的新手，我正在努力解决这个问题，需要你的指导。一切都很好，我可以通过

Ajax

获得

ProductID

，这是

ProductOffers

，但是当我再次使用

下拉列表时，它不会自动填充

<table>
    <thead>
        <tr>
            <th></th>
            <th>Product</th>
            <th>Product Offers</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select data-bind="options: Products, optionsText: 'Name',optionsValue: 'ID', value: ProductID, optionsCaption: '-'" />
            </td>
            <td data-bind="if: ProductID">
                <select data-bind="options: ProductOffers, optionsText: 'Name',optionsValue: 'ID', value: ProductOfferID, optionsCaption: '-'" />
            </td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

<script type="text/javascript">

    function Product(id, name) {
        this.ID = id;
        this.Name = name;
    }
    function Offer(id, name) {
        this.ID = id;
        this.Name = name;
    }

    var viewModel = {
        Products: ko.observableArray(<%= LoadProducts() %>),

        ProductID: ko.observable('0'),
        ProductOfferID: ko.observable('0'),

        ProductOffers: ko.observable("")
    };

        viewModel.ProductID.subscribe(function (newValue) {
            if (typeof newValue != "undefined") {
                //alert("Selected product is : " + newValue);
                viewModel.ProductOffers = GetProductOffers(newValue);
                //alert(viewModel.ProductOffers);
            }
        });

        ko.extenders.numeric = function (target, precision) {
            //create a writeable computed observable to intercept writes to our observable
            var result = ko.computed({
                read: target,  //always return the original observables value
                write: function (newValue) {
                    var current = target(),
                roundingMultiplier = Math.pow(10, precision),
                newValueAsNum = isNaN(newValue) ? 0 : parseFloat(+newValue),
                valueToWrite = Math.round(newValueAsNum * roundingMultiplier) / roundingMultiplier;

                    //only write if it changed
                    if (valueToWrite !== current) {
                        target(valueToWrite);
                    } else {
                        //if the rounded value is the same, but a different value was written, force a notification for the current field
                        if (newValue !== current) {
                            target.notifySubscribers(valueToWrite);
                        }
                    }
                }
            });

            //initialize with current value to make sure it is rounded appropriately
            result(target());

            //return the new computed observable
            return result;
        };

        ko.applyBindings(viewModel);

        function GetProductOffers(ProductID) {

            alert("Fetching offers for Product : " + ProductID)

            var Val = "";
            jQuery.ajax({
                type: "POST",
                url: "testing.aspx/GetProductOffers",
                data: "{ProductID: '" + ProductID + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false,
                success: function (msg) {
                    Val = msg.d;
                },
                error: function (jqXHR, exception) {
                    if (jqXHR.status === 0) {
                        alert('Not connect.\n Verify Network.' + jqXHR.responseText);
                    } else if (jqXHR.status == 404) {
                        alert('Requested page not found. [404]' + jqXHR.responseText);
                    } else if (jqXHR.status == 500) {
                        alert('Internal Server Error [500].' + jqXHR.responseText);
                    } else if (exception === 'parsererror') {
                        alert('Requested JSON parse failed.' + jqXHR.responseText);
                    } else if (exception === 'timeout') {
                        alert('Time out error.' + jqXHR.responseText);
                    } else if (exception === 'abort') {
                        alert('Ajax request aborted.' + jqXHR.responseText);
                    } else {
                        alert('Uncaught Error.\n' + jqXHR.responseText);
                    }
                }
            });
            return Val;
        }
</script>

不正确-仅当您有ProductID嵌套对象时才需要这样做。你不需要，所以不需要。只需将第二个列表绑定到
ProductOffers
而不是
$data.ProductOffers

如果您想要达到的目的是在有优惠之前不显示第二个列表，那么只需将
更改为
，这应该可以按预期工作

编辑：

我不能肯定地说，因为我不知道返回的确切内容，但我猜
ProductOffers
有问题。ajax调用返回结果，这就是您设置的
ProductOffers
，但是每个
ProductOffer
的结构是否与您为选择列表绑定设置的结构相同？您有
Name
和
ID
作为绑定值，这些属性是您从ajax调用（
GetProductOffers
）返回的项的属性吗

编辑2

好的，我从您与Diana的聊天中看到，您的web方法返回类似“[new Offer（..）…]”的内容。我猜你把这个方法编码成只返回一个字符串什么的，对吗？您需要实际创建一个
列表
，然后用
JavascriptSerializer
或JSON.net之类的东西对其进行序列化。您需要从web方法返回JSON。如果您展示web方法代码，这将非常有帮助，那么我们可以帮助您找出哪里出了问题

编辑3

我绝对建议不要“手工”创建JSON——要么使用内置的
JavascriptSerializer
，要么更好地使用JSON.net。虽然这不是必须的，但它更干净、更简单。另外，可以说，为什么要重新发明轮子？检查-她已经准确地概述了你需要做什么才能让这个工作。祝你好运！：）
 为什么您要将
ProductOffers
声明为
ko.observable（“”
？它应该声明为可观察数组：
ProductOffers:ko.observeArray（[]）

另外，在你的JFiddle中：

function GetProductOffers(ProductID) {
    var Val = "[new Offer(1,'Name'),new Offer(2,'Product A'),new Offer(4,'Product B'),new Offer(5,'Product C')]";               
    return Val;
}

应该是：

function GetProductOffers(ProductID) {
    var Val = [new Offer(1,'Name'),new Offer(2,'Product A'),new Offer(4,'Product B'),new Offer(5,'Product C')];             
    return Val;
}


编辑：

viewModel.ProductID.subscribe(function (newValue) {

    viewModel.ProductOffers.removeAll();

    if (newValue) {
        var productOffers = GetProductOffers(newValue);
        viewModel.ProductOffers(productOffers);
    }

});

尝试按如下方式修改您的设置：

  [WebMethod]
public static string GetProductOffers(long ProductID)
{   
    List<DMS.ProductOfferDO> offers = ProductOffers.Get(ProductID);

    return JsonConvert.SerializeObject(offers);
}

EDIT2:

viewModel.ProductID.subscribe(function (newValue) {

    viewModel.ProductOffers.removeAll();

    if (newValue) {
        var productOffers = GetProductOffers(newValue);
        viewModel.ProductOffers(productOffers);
    }

});

请告诉我们进展如何
 您的示例代码中没有任何内容可以实际获取任何数据或填充第一个列表选项中的第二个列表，因此我认为您要么需要包含更多代码，要么缺少大量逻辑。@TimHobbs感谢您的即时响应，我没有遗漏任何东西，正如我所说的，除了这个问题，它工作得很好。所有这一切我试图完成他的第二个下拉列表填充的变化第一。还有一些细节，比如价格和库存。并显示在表格上。我的错误-我想我的大脑放屁了，没有向下滚动查看其余部分。：）有时会发生这种情况bro:Dupdate with JSFIDDLE更改了一些代码，发生了一些事情，但现在有一个长长的第二个列表没有显示任何内容现在它显示了100个空选项，如
，我不知道发生了什么事now@DianaNassar我已经将
ProductOffer
更改为标准JSON，它现在工作正常，但现在当我更改第一个下拉列表的值时，第二个下拉列表不会自动更新。但是ajax请求正在获取更新的值，我可以在警报中看到它们。当我使用fiddle之类的固定值时，它可以正常工作，但当我使用ajax web服务时，它不起作用，我使用了
JSON。parse
，但它会给出错误SyntaxError:意外标记这与JSON结果无效有关。你能验证一下这里的外观吗？顺便说一下，如果您的Web服务返回一个字符串，则使用此选项。您的方法返回什么？返回这个，JSLint说它无效。[新报价（6，'1个免费单元'）、新报价（7，'1个免费单元'）、新报价（5，'100个每单元'）]这甚至不是JSON；然后你返回了一个列表-你不能使用JSON.parse:）奇怪的是，我在小提琴中硬编码了你的返回值，它正在工作：看起来你的Web服务有问题，你能检查控制台有没有任何错误吗？
viewModel.ProductID.subscribe(function (newValue) {

    viewModel.ProductOffers.removeAll();

    if (newValue) {
        var productOffers = GetProductOffers(newValue);
        viewModel.ProductOffers(productOffers);
    }

});