javacript

[test019] 複数のセレクトボックスが競合しないようにする

複数のセレクトボックスが競合しないようにする

仕様

複数のセレクトボックスがあった場合、その選択肢が他のものと
同じにならないようにする

ソース

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>

その他

サンプル

See the Pen test019 by yambe jp (@yambejp) on CodePen.