目的

options綁定主要用于下拉列表中（即<select>元素）或多選列表（例如，<select size='6'>）。此綁定不能與除<select>元素之外的任何其他元素一起使用。

其值應(yīng)該是一個(gè)數(shù)組（或監(jiān)控屬性數(shù)組）。

注意：對(duì)于多選列表，設(shè)置該選項(xiàng)被選中，或讀取其中被選中的選項(xiàng)，需要使用的selectedOptions綁定。對(duì)于單選擇列表，可以結(jié)合value綁定讀取和寫(xiě)入選定的選項(xiàng)的。。

示例1：下拉列表

源碼：

<p>
    Destination country:
    <select data-bind="options: availableCountries"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        // These are the initial options
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
    };
 
    // ... then later ...
    viewModel.availableCountries.push('China'); // Adds another option
</script>

示例2：多選列表

源碼：

<p>
    Choose some countries you would like to visit:
    <select data-bind="options: availableCountries" size="5" multiple="true"></select>
</p>
 
<script type="text/javascript">
    var viewModel = {
        availableCountries: ko.observableArray(['France', 'Germany', 'Spain'])
    };
</script>

示例3：任意JS對(duì)象的下拉列表

源碼：

<p>
    Your country:
    <select data-bind="options: availableCountries,
                       optionsText: 'countryName',
                       value: selectedCountry,
                       optionsCaption: 'Choose...'"></select>
</p>
 
<div data-bind="visible: selectedCountry"> <!-- Appears when you select something -->
    You have chosen a country with population
    <span data-bind="text: selectedCountry() ? selectedCountry().countryPopulation : 'unknown'"></span>.
</div>
 
<script type="text/javascript">
    // Constructor for an object with two properties
    var Country = function(name, population) {
        this.countryName = name;
        this.countryPopulation = population;
    };
 
    var viewModel = {
        availableCountries : ko.observableArray([
            new Country("UK", 65000000),
            new Country("USA", 320000000),
            new Country("Sweden", 29000000)
        ]),
        selectedCountry : ko.observable() // Nothing selected by default
    };
</script>

示例4：任意JS對(duì)象的下拉列表并以計(jì)算的方式顯示文本

源碼：

<!-- Same as example 3, except the <select> box expressed as follows: -->
<select data-bind="options: availableCountries,
                   optionsText: function(item) {
                       return item.countryName + ' (pop: ' + item.countryPopulation + ')'
                   },
                   value: selectedCountry,
                   optionsCaption: 'Choose...'">
</select>

備注，示例4與示例3的唯一區(qū)別在于optionsText的顯示方式。

參數(shù)

• optionsCaption

  有時(shí)候，你可能不希望默認(rèn)選擇選中任何特定選項(xiàng)。但單選擇下拉列表中通常選擇一些默認(rèn)項(xiàng)目啟動(dòng)，因此，如何避免預(yù)選的東西，通常的解決方法是用一個(gè)特殊的虛擬選項(xiàng)，只是寫(xiě)著“選擇項(xiàng)”或“請(qǐng)選擇一個(gè)選項(xiàng)”或類(lèi)似的東西，并具有在默認(rèn)情況下選擇了一個(gè)前綴的選項(xiàng)列表。

  這很容易做到：只需添加額外的參數(shù)有名字optionsCaption，它的值是顯示一個(gè)字符串。例如：

  <select data-bind='options: myOptions, optionsCaption: "Select an item...", value: myChosenValue'></select>

  KO會(huì)前綴一個(gè)顯示文本的項(xiàng)目列表“選擇項(xiàng)目...”它的值是undefined。因此，如果myChosenValue保持值undefined，則虛設(shè)選項(xiàng)將被選中。如果optionsCaption參數(shù)是監(jiān)控屬性，則初始項(xiàng)目的文本將根據(jù)監(jiān)控屬性值的變化而變化。

• optionsText

  見(jiàn)上面的示例3，在這種情況下，你需要選擇該對(duì)象的屬性應(yīng)顯示為下拉列表或多選列表的文本。示例3顯示了如何可以通過(guò)傳遞一個(gè)額外的參數(shù)指定屬性名optionsText。

  如果你不希望下拉列表中的每個(gè)項(xiàng)目顯示的只是一個(gè)簡(jiǎn)單的屬性值的文本，你可以給optionsText選項(xiàng)傳遞一個(gè)JavaScript函數(shù)，并提供您自己任意的邏輯在表示對(duì)象的條件計(jì)算顯示的文本。如示例4。

• optionsValue

  類(lèi)似optionsText，您還可以傳遞一個(gè)名為optionsValue的附加參數(shù)，以指定應(yīng)使用哪些對(duì)象屬性來(lái)設(shè)置KO生成的<option>元素上的value屬性。 您還可以指定JavaScript函數(shù)來(lái)確定此值。 此函數(shù)將接收所選項(xiàng)作為其唯一參數(shù)，并應(yīng)返回用于<option>元素的value屬性的字符串。

  通常，您只想使用optionsValue作為一種確保KO在更新可用選項(xiàng)集時(shí)正確保留選擇的方法。 例如，如果您通過(guò)Ajax調(diào)用重復(fù)獲取“car”對(duì)象的列表，并且想要確保所選擇的汽車(chē)被保留，您可能需要將optionsValue設(shè)置為“carId”或每個(gè)“car”對(duì)象具有的唯一標(biāo)識(shí)符 ，否則KO不一定知道先前的“汽車(chē)”對(duì)象中的哪一個(gè)對(duì)應(yīng)于新集合中的項(xiàng)目。

• optionsIncludeDestroyed

  有時(shí)你可能想將一個(gè)數(shù)組條目標(biāo)記為已刪除，但實(shí)際上沒(méi)有真的刪除。 這被稱(chēng)為非破壞性刪除。

  默認(rèn)情況下，選項(xiàng)綁定將跳過(guò)（即隱藏）標(biāo)記為已銷(xiāo)毀的任何數(shù)組條目。 如果要顯示已銷(xiāo)毀的條目，請(qǐng)指定此附加參數(shù)，例如：

  <select data-bind='options: myOptions, optionsIncludeDestroyed: true'></select>

• optionsAfterRender

  如果需要在生成的選項(xiàng)元素上運(yùn)行一些自定義邏輯，可以使用optionsAfterRender回調(diào)。 見(jiàn)下文注2。

• selectedOptions

  對(duì)于多選列表，可以使用selectedOptions讀取和寫(xiě)入所選狀態(tài)。 技術(shù)上這是一個(gè)單獨(dú)的綁定，你可以參考下一節(jié)的selectedOptions綁定。

• valueAllowUnset

  如果你想讓Knockout允許你的模型屬性獲取在你的<select>元素沒(méi)有相應(yīng)條目的值（并通過(guò)使<select>元素為空，顯示這個(gè)值），然后參見(jiàn)第四章 value綁定的valueAllowUnset。

備注1：設(shè)置/更改選項(xiàng)時(shí)保留選擇

當(dāng)選項(xiàng)綁定更改您的<select>元素中的選項(xiàng)集時(shí)，KO將盡可能不改變用戶(hù)的選擇。 因此，對(duì)于單選擇下拉列表，仍將選擇先前選擇的選項(xiàng)值，而對(duì)于多選列表，仍將選擇所有先前選擇的選項(xiàng)值（除非您已刪除 一個(gè)或多個(gè)選項(xiàng)）。

這是因?yàn)檫x項(xiàng)綁定試圖獨(dú)立于值綁定（控制單選列表的選擇）和selectedOptions綁定（控制多選列表的選擇）。

備注2：對(duì)生成的選項(xiàng)進(jìn)行處理

如果需要在生成的選項(xiàng)元素上運(yùn)行一些自定義邏輯，可以使用optionsAfterRender回調(diào)。 每當(dāng)將一個(gè)選項(xiàng)元素插入到列表中時(shí)，將調(diào)用回調(diào)函數(shù)，并使用以下參數(shù)：

1. 插入的option元素
2. 與其綁定的數(shù)據(jù)項(xiàng)，或?qū)τ赾aption元素未定義的數(shù)據(jù)項(xiàng)

下面是一個(gè)使用optionsAfterRender向每個(gè)選項(xiàng)添加禁用綁定的示例：

源碼：

<select size=3 data-bind="
    options: myItems,
    optionsText: 'name',
    optionsValue: 'id',
    optionsAfterRender: setOptionDisable">
</select>
 
<script type="text/javascript">
    var vm = {
        myItems: [
            { name: 'Item 1', id: 1, disable: ko.observable(false)},
            { name: 'Item 3', id: 3, disable: ko.observable(true)},
            { name: 'Item 4', id: 4, disable: ko.observable(false)}
        ],
        setOptionDisable: function(option, item) {
            ko.applyBindingsToNode(option, {disable: item.disable}, item);
        }
    };
    ko.applyBindings(vm);
</script>