セレクトボックスの値の繰り上げ

Question

すでに選択された状態の上下2段に並んでいるセレクトボックスにおいてボタン投下で下で選択された値を上のセレクトボックスに繰り上げて更新する方法を教えてください。
イメージは駅の発車標のような感じです。

Comments

[m.ts10806]

具体的なコード、自身が調べたこと試したことを記載してください

Answer 1

HTML もないので適当に

document.querySelector('button').addEventListener('click', function(event) {
  const select = document.querySelectorAll('select');
  for (let i = 0; i < select.length - 1; i++) {
    select[i].value = select[i + 1].value;
  }
}, false);

Answer 2

条件がよくわかりませんが、こんな感じ

Comments

[yambejp]

<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#btn').addEventListener('click',()=>{
var hoge=document.querySelector('#hoge');
var fuga=document.querySelector('#fuga');
hoge.appendChild(fuga.options[fuga.selectedIndex].cloneNode(true));
});
});
</script>
<select name="hoge" id="hoge">
<option value="">--</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select><br>
<select name="fuga" id="fuga">
<option value="">--</option>
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select><br>
<input type="button" value="btn" id="btn">

[vfxl9827]

http://r113.sakura.ne.jp/p/hasshahyo/tobu-kitasenju-display/index.html
にあるようにのプルダウンの値を上げるような方法をご教授願いたいです。

Answer 3

メッサ適当です。

<select id=board>
  <option>aiueo</option>
  <option>aiueo</option>
</select>
<button onclick=next()>next</button>

function next(){
  var now = new Date();
  $('option').eq(0).remove();
  $('select').append('<select>'+now.toString()+'</select>');
}

サンプル