我如何使用 Knockout 使 div 仅在选择下拉列表中的值时才可见

Question

当我从从SHarepoint列表中提取的下拉列表中选择"USB访问请求"时，我想查看div。

下拉列表

Application: 
                <select data-bind="value: $data.selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'Choose an Application'" style="width: 32px" name="Application list" id="dataBox">
                </select>
    <div name="main">

我想

展示的 Div

<div name="main">
        <input type="checkbox" /> Tick this box if there is an end date for the 
        permissions.
    </div>
    <div class='other' name='other' title='other' style='display:none;'>  
    <p>Date: <input type="text" id="datepicker"/></p>
    </div>

我已经删除了我的脚本，因为它是完全错误的，但如有必要会添加它。

Answer 1

您希望将

下拉列表的值绑定到可观察的视图模型，如 selectedApp 。确保它在您的视图模型中定义，如 self.selectedApp = ko.observable(); .

<select data-bind="value: selectedApp, options: $parent.applications, optionsText: 'ApplicationName', optionsCaption: 'Choose an Application'" style="width: 32px" name="Application list" id="dataBox">
</select>

然后，仅当 selectedApp 具有值时，才使用可见绑定显示div：

<!-- ko visible: selectedApp -->
<div name="main">
    <input type="checkbox" /> Tick this box if there is an end date for the permissions.
</div>
<div class='other' name='other' title='other' style='display:none;'>  
    <p>Date: <input type="text" id="datepicker"/></p>
</div>
<!-- /ko -->