在 Knockout.js 中单击按钮时检查选择控件是不是具有值

Posted 2023-03-27

【中文标题】在 Knockout.js 中单击按钮时检查选择控件是不是具有值

【英文标题】：Check if select control has value when button is clicked in Knockout.js在 Knockout.js 中单击按钮时检查选择控件是否具有值

【发布时间】：2016-03-25 12:49:55

【问题描述】：

我想知道当在 foreach 循环中单击按钮时，我是否可以以某种方式检测选择控件是否具有值。

这是我的标记：

                                                  <tbody data-bind="foreach: Pack">
                            <tr>
                                <th class="name"><span data-bind="text: Name"></span></th>
                            </tr>
                            <tr>
                                <td class="bg" colspan="3" align="left"  valign="middle">
                                    <div class="row">
                                        <div>
                                        <select class="form-control" data-bind="options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6 n-p m-t-30">
                                            <!-- ko if: !Processing() -->
                                            <a href="javascript:void();" data-bind="click: $root.AddToCart" class="additem-link">Add To Order</a>
                                            <!-- /ko -->
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>

这是添加到购物车的功能：

t.AddToCart = function (n) 
                   if (!t.Busy()) 
                       t.Busy(!0);
                       n.Processing(!0);
                        $.ajax(
                           type: "POST",
                           url: "/webservices/ShopWS.asmx/AddToCart",
                           data: "'packId': " + n.Id + "",
                           contentType: "application/json; charset=utf-8",
                           dataType: "json",
                           success: function (i) 
                               if (i.d) 
                                   n.Processing(!13);
                                   t.Busy(!13);
                               
                           ,
                           error: function (n) 
                               u(n);
                           
                       );
                   
               ;

我想在 foreach 循环中检查 select 控件是否具有该项目的实际值，如果有，则可以将其添加到购物车中，否则将不可能。

我该怎么做？

【问题讨论】：

从一些变量的命名方式很难判断，但我猜你可以在调用 ajax 之前检查 n.Id 是否有值。当然，如果我正确理解了您的问题。

@DonovanM n.Id 来自另一个控件，它不是实际的 TeacherId

哦，等等，您还需要一个value 绑定。将其设置为可观察的，这将为您提供当前选定项目的值。

@DonovanM 你能给我一个样本吗？我该怎么做？谢谢

好的，只是添加了一个简单的例子。

【参考方案1】：

要获取所选项目的值，您可以在select 元素上使用value 绑定。

<select class="form-control" data-bind="value: selectedItem, options: $root.TeacherOptions(), optionsValue: 'TeacherId', optionsText: 'TeacherName', optionsCaption: 'Choose Teacher'"></select>

在你的视图模型中你会使用

this.selectedItem = ko.observable(); // You can optionally set it to a specific TeacherId

完成此操作后，this.selectedItem() 将返回当前所选项目的任何值。

【讨论】：

甜蜜。也祝你节日快乐！