Question

我正在尝试将选定的输入值放入隐藏字段中，任何人都可以帮助我，到目前为止我正在尝试下面的代码。

Html

<select data-bind="options: packages,
                   optionsCaption: 'Select...',
                   optionsText: 'name',
                   value: selectedPackage">                 
</select>
</br>
<!-- ko with : selectedPackage -->
</br>
<select data-bind="options: locationOptions,
                   optionsCaption: 'Select...',
                   optionsText: 'location',
                   value: $parent.selectedLocation">
</select>
<!-- /ko  -->

在

显示值

<span data-bind="with: selectedPackage">
        <b data-bind="text: name"></b> 
            <!-- ko with : $parent.selectedLocation -->
                > <b data-bind="text: location"></b>
            <!-- /ko  -->
    </span>
            </td>
            <td>
                <span data-bind="with: selectedPackage">
                <b data-bind="text: price"></b> $ +  
            <!-- ko with : $parent.selectedLocation -->
                $<b data-bind="text: price"></b>
            <!-- /ko  -->
    </span>

Js / Knockout代码

    this.packages = [
    {
        sku : "306",
        name: "Standard delivery hours (8-4)",
        description: "its nice",
        price: 99,
        locationOptions : []
    },
    {
        sku : "100",
        name: "Within a 4 hour window (adds $15)",
        description: "its nice",
        price: 100,
        locationOptions : [
            { location: "6:00 AM - 10:00 AM (off hours)", price: 15},
            { location: "6:30 AM - 10:30 AM (off hours)", price: 15},
            { location: "7:00 AM - 11:00 AM (off hours)", price: 15}
        ]
    },
    {
        sku : "101",
        name: "Within a 2 hour window (adds $25)",
        description: "its cool",
        price: 100,
        locationOptions : [
            { location: "8:00 AM - 10:00 AM", price: 25},
            { location: "10:00 AM - 12:00 PM", price: 25},
            { location: "12:00 AM - 02:00 PM", price: 25}
        ]
    },
    {
        sku : "102",
        name: "Within a 1 hour window (adds $40)",
        description: "its cool",
        price: 100,
        locationOptions : [
            { location: " 8:00 AM - 9:00 PM", price: 40},
            { location: "9:30 AM - 10:00 PM", price: 40},
            { location: "10:00 AM - 11:00 PM", price: 40}
        ]
    }
];


    this.selectedPackage = ko.observable();

一切正常，但我试图将选定的相关值输入隐藏字段，但值不会呈现。

<input id="return_order_dependent" type="hidden" name="return_order_dependent" data-bind='value: selectedPackage().name' />

Answer 1

问题是selectedPackage可以是null或undefined。每当发生这种情况时，value数据绑定都会引发错误：

selectedPackage().name 变为 undefined.name 抛出 Cannot read property 'name' of undefined

undefined / null值是optionsCaption绑定的结果。如果没有标题，knockout wil会在应用select绑定时将您选择的值设置为列表中的第一个元素。

你需要做两件事：

确定您希望如何指示未设置值
确保数据绑定不会中断。

就个人而言，我会使用计算机并在viewmodel中管理未设置状态：

this.hiddenInputValue = ko.pureComputed(() => {
  return (this.selectedPackage() || { name: "NOT_SET" }).name;
});

使用数据绑定：

<input type="hidden" data-bind='value: hiddenInputValue' />

您也可以将此逻辑放入数据绑定本身（此示例默认为null）

<input type="hidden" data-bind='value: selectedPackage() ? selectedPackage().name : null' />

其他解决方案指示如下：

删除optionsCaption，默认情况下始终选择第一个值
在隐藏的输入周围放置if或with（这可能不适用于与服务器相关的内容）

如何将依赖选项值放入knockoutJs中的隐藏输入字段中

1 个答案: