javascript - 动态设置 knockout 下拉值

标签 javascript html knockout.js

我有一个下拉值,事实证明很难在控制台中设置。我尝试过使用 Jquery .val 和 document.getEWlementById.value ,两者都不会设置该项目。有谁知道如何使用该值设置下拉列表的值?我认为问题在于它使用了 Knockout,这使得动态设置它变得更加困难。

这是 HTML:

<select id="sourceShippingLocations" data-bind="options: $root.ShippingLocations, optionsText:'Name', optionsCaption:'Select location', value: $root.SelectedOriginShippingLocation" class="form-control" title="">
    <option value="">Select location</option>
    <option value="">doo Warehouse</option>
    <option value="">moo</option>
    <option value="">Manchester</option>
</select>

最佳答案

Knockout 并不会让“动态设置变得更加困难”。只是工作方式不同而已。

在 knockout 中, View 模型决定 View 中发生的情况。换句话说:您不直接通过修改属性来设置 select 的值,而是更改底层模型的选定值,并且 knockout 会为您管理 UI 状态。

每个 <option> elements 表示名为 $root.ShippingLocations 的数组中的值。所选值存储在 $root.SelectedOriginShippingLocation 中。

在 View 模型中,您可以通过执行以下操作来更新当前选择:

 this.SelectedOriginShippingLocation(this.ShippingLocations()[0])

(这会将选择设置为第一个送货地点)

如果您想在不修改 View 模型的情况下看到它的实际效果,您可以在控制台中破解它:

var root = ko.contextFor(document.getElementById("sourceShippingLocations")).$root;
root.SelectedOriginShippingLocation(ko.unwrap(root.ShippingLocations)[0]);

// change 0 for the index you like

关于javascript - 动态设置 knockout 下拉值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44669969/

相关文章:

javascript - jQuery.Validate - 如何将错误结果放在不同的地方?

javascript - 在 li 中使用 dropit.js,导致列表在折叠后消失

javascript - knockout - 它是如何工作的?

knockout.js - 通过索引从 observableArray 中获取对象

javascript - 点击特定类触发下拉事件

javascript - knockout 绑定(bind)中的同步动画

javascript - YouTube iframe加载的脚本不会超过Google的页面速度

javascript - 如何删除 chrome 图标添加到主屏幕提示

jquery - 格式化网格内的每个语句结果?

javascript - 重新打开或关闭后重置下拉菜单详细信息