Knockout绑定select标签时如何设置默认选中选项

问题原因 #

原生selected="selected"属性不生效，是因为Knockout的options绑定会完全接管下拉框的选项渲染、选中状态管理逻辑，原生DOM属性会被框架的绑定逻辑覆盖。你当前的绑定代码缺少了和选中状态关联的value绑定配置，这是Knockout体系下控制下拉选中值的核心入口。

具体实现步骤 #

• 先在页面对应的ViewModel（也就是绑定里的$root对象）中定义存储选中值的可观察对象：

// 定义选中值的可观察变量，因为你配置了optionsValue: 'Value'，这个变量存的是选项的Value字段值
self.SelectedCRS = ko.observable();

• 修改select标签的data-bind配置，新增value绑定关联刚才定义的可观察对象，修改后的代码如下：

<div class="input-group btn-group">
    <select style="width:100%" 
        data-bind="select2: {},
                   options: $root.AvailableCRSListComputed,
                   optionsText: 'Text',
                   optionsValue: 'Value',
                   value: $root.SelectedCRS,
                   selectPicker: $root.CoordinateSelecterFromMap"
        class="form-control">
    </select>
</div>

• 设置默认选中值：等AvailableCRSListComputed的选项列表加载完成后，直接给SelectedCRS赋值即可，赋值内容需要和目标默认项的Value字段值完全一致（类型、值都要匹配）。

// 示例：默认选中Value为"EPSG:4326"的坐标系选项
// 注意必须在下拉选项数据加载完成后执行赋值，否则框架找不到对应选项会无法正常选中
self.SelectedCRS("EPSG:4326");

注意事项 #

• 如果你删除了optionsValue: 'Value'配置，value绑定存储的会是整个选项对象，此时赋值需要传入AvailableCRSListComputed数组中对应的完整对象才能正常选中。
• 你代码中用到的select2、selectPicker这类第三方下拉插件的自定义Knockout绑定，需要保证没有拦截value绑定的状态同步，常规合规的自定义绑定都会自动读取value绑定的值同步插件的选中状态。
• 不要通过原生DOM操作设置选中状态：手动给option加selected属性、修改select的selectedIndex这类操作都会被Knockout的绑定重绘逻辑覆盖，无法持久生效。

内容的提问来源于stack exchange，提问作者Wiesiii