select option의 위치 바꾸기

js

function move(index,to) {
  var list = document.form.list;
  var total = list.options.length-1;
  if (index == -1) return false;
  if (to == +1 && index == total) return false;
  if (to == -1 && index == 0) return false;
  var items = new Array;
  var values = new Array;
  for (i = total; i >= 0; i--) {
    items[i] = list.options[i].text;
    values[i] = list.options[i].value;
  }
  for (i = total; i >= 0; i--) {
    if (index == i) {
      list.options[i + to] = new Option(items[i],values[i + to], 0, 1);
      list.options[i] = new Option(items[i + to], values[i]);
      i--;
    }
    else {
      list.options[i] = new Option(items[i], values[i]);
    }
  }
  list.focus();
}
function submitForm() {
  var list = document.form.list;
  var theList = "?";
  for (i = 0; i  <= list.options.length-1; i++) { 
    theList += "list" + list.options[i].value + "=" + list.options[i].text;
    if (i != list.options.length-1) theList += "&";
  }
  location.href = document.form.action + theList;
}

css

#layout {
  display: flex;
}

html

<form name="form">
    <div id="layout">
      <div>
        <select name="list" size="4">
          <option value="1">첫번째 항목 </option>
          <option value="2">두번째 항목 </option>
          <option value="3">세번째 항목 </option>
          <option value="4">네번째 항목 </option>
        </select> 
      </div>
      <div>
        <input type="button" value="↑" onClick="move(this.form.list.selectedIndex,-1)"> <br> 
        <input type="button" value="↓" onClick="move(this.form.list.selectedIndex,+1)">
      </div>
    </div>
  </form>

See the Pen Scroll to Top Button only visible when another element disappears by younghyeong ryu (@wangta69) on CodePen.