テキストの入力値によってコンボボックスの値を変更するようなことをしようとしたときにしたこと。
最近disられていたAngularJSを使用しています。JSをほとんど知らない自分にとって楽でいいですね。
例)ApplicationのVersionに対して、Download ContentsのVersionを設定する場合のコード。良いコードかは分かりません。簡単にかけますね。
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script type="text/javascript">
angular.module('versionApp', [])
.controller('versionController', function ($scope) {
$scope.versions = [
{"application": "0.0.1", "dlc": "0.0.1"},
{"application": "0.0.1", "dlc": "0.0.2"},
{"application": "0.0.1", "dlc": "0.0.3"},
{"application": "0.0.2", "dlc": "0.0.2"},
{"application": "0.0.2", "dlc": "0.0.3"},
{"application": "0.0.3", "dlc": "0.0.3"}
];
$scope.selectVersions = $scope.versions;
$scope.onEditChange = function() {
var versions = [];
for (var i = 0, length = $scope.versions.length; i < length; i++) {
if ($scope.applicationVersion == $scope.versions[i].application) {
versions.push($scope.versions[i]);
}
}
$scope.selectVersions = versions;
};
});
</script>
</head>
<body>
<div ng-app="versionApp">
<div ng-controller="versionController">
<form action="/update" method="post">
<input type="text" name="applicationversion" ng-model="applicationVersion" placefolder="application version" ng-change="onEditChange()" />
<select name="dlcversion">
<option ng-repeat="version in selectVersions" value="{{ version.dlc }}">{{ version.dlc }}</option>
</select>
</form>
</div>
</div>
</body>
</html>