comboNInputBox

by uiwwnw

HTML

<div class="whatYouWantDropMenuName1" id="as1">
  <select name="ccc">
        <option value="default">선택</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
      </select>
</div>
<div class="whatYouWantDropMenuName1" id="as2">
  <select name="bbb">
        <option value="default">선택</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
      </select>
</div>
<p class="lorem">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores beatae sed dignissimos reprehenderit, ipsam nihil blanditiis odio corporis repellendus suscipit ex delectus odit soluta. Aspernatur consectetur quidem iste ad necessitatibus?Eum perspiciatis
  cum quos sequi iusto ex tempora rem vero ullam deleniti quisquam est sit, sunt, quam, dolor atque maxime nihil? Laboriosam nam officia ab, facere asperiores fugiat placeat repellendus?
</p>
<div class="whatYouWantDropMenuName2" id="as3">
  <select name="aaa">
        <option value="default">선택</option>
        <option value="aaa">직접입력</option>
        <option value="1">1</option>
        <option value="2" selected>2</option>
        <option value="3">3</option>
        <option value="4">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Numquam ratione nulla fuga at quasi. Nulla harum et hic. Iste ipsum architecto vitae? Quos voluptatem numquam, magni asperiores incidunt rerum assumenda!Eum ut fugit at consectetur aliquam. Quibusdam aperiam quia alias earum, praesentium eligendi veritatis perspiciatis nesciunt similique nihil distinctio aliquid fugiat libero hic ea modi ducimus minima non, ut...

SCSS

@charset "utf-8";
$focusWidth: 1px;
$focusColor: #3e3e3e;
$inputTextColor: #000;
$optionTextColor: #000;
$exActiveBgColor: #dfdfdf;
$wrapBorderWidth: 1px;
$wrapBorderColor: black;
$optionBorderWidth: 1px;
$optionBorderColor: gray;
$paddingHorizon: 10px;
$paddingVertical: 5px;
$fontSize: 13px;
$allowSize: 5px;
$z-index: ( normalWrap: 1, // 전체 웹
activeWrap: 2, // 활성화 되었을 때 // 다른 드롭매뉴와 겹침 방지
//
frontDecoration: 3, // input의 포커스 시 생기는 아웃라인
front: 4, // input
option: 2, // 드롭된 매뉴
dim: 1);
@function z-index($key) {
  @return map-get($z-index, $key);
}

.dropMenu {
  z-index: z-index(normalWrap);
  position: relative;
  font-size: $fontSize;
  .i {
    &:before {
      z-index: z-index(frontDecoration);
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      outline: $focusWidth solid $focusColor;
      content: "";
    }
    &:after {
      z-index: z-index(front);
      position: absolute;
      top: 0;
      right: $allowSize * 2;
      bottom: 0;
      width: $allowSize;
      height: $allowSize;
      margin: auto;
      border: 1px solid $wrapBorderColor;
      border-top: 0;
      border-left: 0;
      transform: rotate(45deg);
      transition: transform .4s;
      content: "";
    }
  }
  .dim {
    z-index: z-index(dim);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    opacity: .3;
    background: #fff;
  }
  .input {
    z-index: z-index(front);
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    padding: $paddingVertical #{$paddingHorizon + $allowSize * 2} $paddingVertical $paddingHorizon;
    font: inherit;
    color: $inputTextColor;
    text-overflow: ellipsis;
    box-sizing: border-box;
    border: $wrapBorderWidth solid $wrapBorderColor;
    cursor: pointer;
    background: 0;
    &:not([readonly]) {
      &+.i:after {
        transform: rotate(45deg) scaleX(-1);
      }
      &:focus {
        &+.i:after...

JavaScript

var dropMenu = function() {
  var _this = this;
  var someThingIsWrong = false;
  var ctr = {};
  var e = arguments[0];
  var opt = arguments[1];
  // [e, opt] = arguments;
  opt = opt === undefined ? new Object : opt;
  ctr.ableClass = opt.ableClass === undefined ? 'active' : opt.ableClass;
  ctr.dropMenuClass = opt.dropMenuClass === undefined ? 'dropMenu' : opt.dropMenuClass;
  ctr.selectClass = opt.selectClass === undefined ? 'select' : opt.selectClass;
  ctr.optionClass = opt.optionClass === undefined ? 'option' : opt.optionClass;
  ctr.inputClass = opt.inputClass === undefined ? 'input' : opt.inputClass;
  ctr.iClass = opt.iClass === undefined ? 'i' : opt.iClass;
  ctr.dimClass = opt.dimClass === undefined ? 'dim' : opt.dimClass;
  ctr.editAble = opt.editAble === undefined ? false : opt.editAble;
  ctr.callback = opt.callback === undefined ? false : opt.callback;
  this.vars = function() {
    return ctr;
  };
  this.get = function() {
    ctr.el = document.querySelectorAll(e);
    ctr.length = ctr.el.length;
    ctr.set = [];
    new _this.rp(this.set, ctr.length);
  };
  this.onOffA = function(ctr, i) {
    var _this = ctr.el[i];
    var _thisClass = _this.getAttribute('class');
    var _other = document.querySelector('.' + ctr.dropMenuClass + '.' + ctr.ableClass);
    var _otherClass = _other !== null ? _other.getAttribute('class') : '';
    if (_other !== null) {
      _otherClass = _otherClass.replace(' ' + ctr.ableClass, '');
      _other.setAttribute('class', _otherClass);
      _other.querySelector('.select').setAttribute('aria-hidden', 'true');
    }
    if (_thisClass.indexOf(ctr.ableClass) === -1) {
      _this.setAttribute('class', _thisClass + ' ' + ctr.ableClass);
      ctr.set[i].dropMenuWrap.setAttribute('aria-hidden', 'hidden');
    }
  };
  this.onOff = function(ctr, i) {
    ctr.el[i].onclick = function() {
      _this.onOffA(ctr, i);
    };
  };
  this.initialInputCheck = function(ctr, i) {
    ctr.set[i].input.onkeyup = function() {
    ...