select - 如何使用 Knockout.JS 制作具有不同值的选择元素然后是文本

Question

我明白那个

<p>Destination country: <select data-bind="options: availableCountries"></select></p>

<script type="text/javascript">
    var viewModel = {
        availableCountries : ko.observableArray(['France', 'Germany', 'Spain']) // These are the initial options
    };

    ko.applyBindings(viewModel);
</script> 

将创建一个选择元素，如:

<select data-bind="options: availableCountries">
    <option value="France">France</option>
    <option value="Germany">Germany</option>
    <option value="Spain">Spain</option>
</select>

但如果我希望它是这样的:

<select data-bind="options: availableCountries">
    <option value="1">France</option>
    <option value="2">Germany</option>
    <option value="3">Spain</option>
</select>

我的代码是什么？

我知道我可以使用 optionsText 来填充选项，但 optionsValue 似乎对我不起作用

干杯，
丹尼尔

Answer 1

你会想要映射你的数组 ['France', 'Germany', 'Spain']到具有 value 的单独属性的结构和 text .

例如，

[
   { value: 1, name: 'France' }, 
   { value: 2, name: 'Germany' }, 
   { value: 3, name: 'Spain' }
]

然后，您可以像这样绑定(bind)它:

<select data-bind="options: availableCountries, optionsText: 'name', optionsValue: 'value'"></select>