Kendo UI MVVM 中选择选项的 Javascript 设置

Question

我需要使用纯 JavaScript 从恰好绑定(bind)到 Kendo UI Observable 对象 (MVVM) 的选择元素中选择一个选项，并且我需要更新绑定(bind)的 View 模型。

<select id="titleField" data-bind="value: Title" >
  <option value=""></option>
  <option value="Mr.">Mr.</option>
  <option value="Ms.">Ms.</option>
  <option value="Dr.">Dr.</option>
</select>

我试过:

document.getElementById('titleField').value='Mr.';

还有:

var sel = document.getElementById('titleField');
var opts = sel.options;
for (var opt, j = 0; opt = opts[j]; j++) {
  if (opt.value == 'Mr.') {
    sel.selectedIndex = j;
    break;
  }
}

他们都设置了字段，但是 MVVM 绑定(bind)没有更新。

如果未更新 View 模型，则在保存记录时不会保留所选值。

通常我会直接操作 View 模型并利用双向绑定(bind)，像这样:

myViewModel.Set("Title", "Mr.");

但是我不能这样做，因为我是从 CefSharp 浏览器实现运行的，不一定知道或关心正在使用 Kendo UI。

编辑:我突然想到，也许上面的方法应该有效，但还有其他一些奇怪的事情发生，比如时间问题，所以我在网站上测试了它(页面加载了 javascript)，实际上它没有更新 View 模型使用上述技术。

Answer 1

答案现在很明显，必须在更新元素后触发 onChange 事件。

对于 Chrome(我唯一关心的)这有效:

var evt = document.createEvent("HTMLEvents");
evt.initEvent("change", false, true);
sel.dispatchEvent(evt);

现在更新了剑道 View 模型。