複数のセレクトボックスが競合しないようにする
仕様
複数のセレクトボックスがあった場合、その選択肢が他のものと
同じにならないようにする
ソース
javascript
test019.js
window.addEventListener('DOMContentLoaded', function(e){
var nodes=document.querySelectorAll('.s');
Array.prototype.forEach.call(nodes,function(n){
n.trigger=function(eventStr){
if (document.createEvent) {
var e = document.createEvent("HTMLEvents");
e.initEvent(eventStr, true, true );
return this.dispatchEvent(e);
} else {
var e = document.createEventObject();
return this.fireEvent("on"+eventStr, e);
}
};
n.addEventListener('change',function(){
Array.prototype.forEach.call(nodes,function(n){
Array.prototype.forEach.call(n.querySelectorAll('option:disabled'),function(n){
n.disabled=false;
});
});
Array.prototype.map.call(nodes,function(n){
return n.value;
}).filter(function(v){
return v!=="";
}).forEach(function(v){
Array.prototype.forEach.call(nodes,function(n){
if(n.value!==v) n.querySelector('option[value='+v+']').disabled=true;
});
});
});
});
nodes[0].trigger('change');
});
HTML
test019.htm
<html>
<title>複数のセレクトボックスが競合しないようにする</title>
<script type="text/javascript" src="test019.js"></script>
<body>
<h1>複数のセレクトボックスが競合しないようにする</h1>
<select name="s1" class="s">
<option value="">------</option>
<option value="りんご">りんご</option>
<option value="みかん">みかん</option>
<option value="いちご" selected>いちご</option>
<option value="バナナ">バナナ</option>
<option value="もも">もも</option>
</select>
<select name="s2" class="s">
<option value="">------</option>
<option value="もも">もも</option>
<option value="みかん">みかん</option>
<option value="バナナ">バナナ</option>
<option value="いちご">いちご</option>
<option value="りんご" selected>りんご</option>
</select>
<select name="s3" class="s">
<option value="">------</option>
<option value="いちご">いちご</option>
<option value="みかん" selected>みかん</option>
<option value="りんご">りんご</option>
<option value="もも">もも</option>
<option value="バナナ">バナナ</option>
</select>
</body>
</html>