「knockoutjs：Using built-in bindings：Working with form fields：options」を別ウィンドウで開く
各種サンプルとソース一覧 | PCスキルの小技・忘却防止メモ |

knockoutjs：Using built-in bindings：Working with form fields：options

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>knockoutjs：Using built-in bindings：Working with form fields：options</title>
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="knockout-2.1.0beta.js"></script>
</head>
<body>
<h1>optionsバインディング（knockoutjs）：選択したものに付随する何かを表示１</h1>
<p>
Your country:
<select data-bind="options: availableCountries,
optionsText: 'countryName',
value: selectedCountry,
optionsCaption: 'Choose...'"></select>
</p>
<div data-bind="visible: selectedCountry">
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
};
ko.applyBindings(viewModel);
</script>
<div style="font-size:10pt;text-align:right;margin-top:0.5em;">
<a href="//tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
<a href="//tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ（wiki）</a>
</div>
<div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
</div>
</body>
</html>