Javascript Knockoutjs-在使用foreach而不是options时，失去了选择值的双向绑定

我有两个选择控件

一个依赖另一个。举个简单的例子，假设第一个显示城市列表，而另一个显示每个城市的街道列表

最初加载页面时，显示街道的选择控件将显示所有可用街道。但是，一旦用户在第一次选择中选择了一个城市，第二次选择将被过滤以仅显示属于所选城市的街道

这在使用选项绑定时可以正常工作，但是，我需要生成optgroup的功能，而选项绑定不支持它，因此我必须使用foreach绑定

结果是，无论何时选择一个城市，都会出现两种意想不到的后果：

第二个选择（过滤的街道列表）似乎选择了所选城市的第一条街道，即使我使用的是valueAllowUnset:true这不会反映在视图模型中

在第二个选择中实际选择一条街道，然后在第一个选择中选择另一个城市时，第二个选择会正确更新以反映列表中的更改，但视图模型不会更新，因此仍然保留以前选择的值（即使它不再在列表中）。即使我从第二次选择中删除valueAllowUnset:true，问题仍然存在

这个问题有解决办法吗？我必须使用foreach绑定而不是options绑定

JSFiddle：

---

首先，在select输入中添加一个空选项

<option value="">Select Street</option>

这样你可以同时解决两个问题

在你的小提琴上做了些改变，它就起作用了。尝试更新它

---

这是一个提琴-

在使用

valueAllowUnset

时，不需要添加空白选项。只需将模型值设置为

undefined

，而不是

'

。显然，我的代码比提供的示例更复杂，因此我必须在

viewModel.selectedStreet（''）

之前添加很多逻辑。我希望有更好的解决办法。。不管怎样，谢谢你的解决方案，它似乎工作正常。

<option value="">Select Street</option>

viewModel.selectedCity.subscribe(function() { 
  viewModel.selectedStreet(''); 
}, viewModel);