Javascript 默认情况下，如果没有显式值，选择值绑定不会填充

我试图使用手动选择值绑定来获取所选对象的id，但我发现除非给出显式值，否则它不会填充。下面是一个例子：

<div id="container">
<select data-bind="value: selectedOption">
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? -->
    <option value="0" data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option>
    <!-- ko foreach: options -->
    <option data-bind="value: id, text: name"></option>
    <!-- /ko -->
</select>
<span data-bind="text: selectedOption"></span>

---

是显示实际问题的JSFIDLE。请注意，selectedOption属性在显式时填充，但在绑定完成时不填充。这种行为是错误吗？如果没有，决定的原因是什么？

您需要将选择框的布局更像这样：

<div id="container">
<select data-bind="options: options, value: selectedOption">


</select>
<span data-bind="text: selectedOption"></span>

---

希望对您有所帮助，此链接也可能对您有所帮助：

这是否符合您的预期

<div id="container">
<select data-bind="value: selectedOption">
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? -->
    <option data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option>
    <!-- ko foreach: options -->
    <option data-bind="value: id, text: name"></option>
    <!-- /ko -->
</select>
<span data-bind="text: selectedOption"></span>

我认为，在应用绑定后，如果不设置selectedOption，这项功能将无法工作，这是因为绑定发生的顺序。首先绑定，由于没有绑定下拉选项，KO无法正确应用此绑定

我跟踪了selectedOption的值，发现在应用绑定后，它被直接设置为空字符串。我猜，当它将绑定应用于DOM时，KO随后通过双向绑定更新了该值，以匹配下拉列表的“选定值”，因为在该阶段没有绑定任何项。从那时起，直到您修改它，所有到selectedOption的绑定都将显示为空

---

有意义吗？

我已将其中一个fiddle答案更新为更清晰的代码。我认为没有必要在选项标签中使用foreach

<div id="container">
<select data-bind="value: selectedOption, options: options, optionsText: 'name'">
</select>
<span data-bind="text: selectedOption().name"></span>

它还使用选项和选项文本作为选择标记

---

出于好奇：你能详细说明一下为什么要避免使用这个选项吗？我认为这比将包含静态选项的计算集合混合在一起更干净。你的观点是正确的，可以这样说。我个人更喜欢使用一个静态选项，或者使用多个混合的计算集合，这样它就可以进行单元测试。即使不是这样，我也不知道有什么方法可以让选项绑定到optgroup上，而我真正的代码必须使用optgroup。公平点！另外，我从来没有想过质疑使用你的方法的有效性，只是试图为你和其他在这个问题上遇到困难的人提供一些额外的选项。我知道有一个选项绑定，我可能可以通过创建一个新列表来解决这个问题，该列表包括静态和动态内容，并绑定到这些内容，但这并不能真正帮助我理解为什么我给出的例子不起作用。这是我让它工作的两种方式之一，另一种是显式设置value属性。。。糟糕。更新了我的答案来解释我认为发生了什么。绑定模型后，selectedOption的值设置为空字符串。我认为这是因为元素绑定到数据的顺序。这也是我所怀疑的，但我在任何地方都找不到任何bug文档，这通常表明我不理解某些东西。

<div id="container">
<select data-bind="value: selectedOption">
    <!-- notice the explicit value of 0 given below... why is that necessary to get selectedOption to be populated when bound? -->
    <option data-bind="value: initialSelectedOptionId, text: 'initially selected option'"></option>
    <!-- ko foreach: options -->
    <option data-bind="value: id, text: name"></option>
    <!-- /ko -->
</select>
<span data-bind="text: selectedOption"></span>

var viewModel = {
options: ko.observableArray([
    {id: 1, name: 'first option'},
    {id: 2, name: 'second option'},
    {id: 3, name: 'third option'},
    {id: 4, name: 'fourth option'}
]),
selectedOption: ko.observable(3),
initialSelectedOptionId: ko.observable(0)};

ko.applyBindings(viewModel, document.getElementById('container'));
//uncommenting the following line will initially select the correct option
viewModel.selectedOption(3);

<div id="container">
<select data-bind="value: selectedOption, options: options, optionsText: 'name'">
</select>
<span data-bind="text: selectedOption().name"></span>