jQueryでselect -> option要素の順番を変える

Question

選択したoption要素（１つのみ）の順番が↑、↓ボタンを押すと入れ替わる様なコードなのですが、良い方法はございますでしょうか。

<select id="idSelect" size="5">
  <option value="val_1">text_1</option>
  <option value="val_2">text_2</option>
  <option value="val_3">text_3</option>
  <option value="val_4">text_4</option>
</select>

<input type="button" value="↑" onClick="OrderChange('up')">
<input type="button" value="↓" onClick="OrderChange('down')">

//順番を入れ替える
function OrderChange(type){

  //選択された要素の番号
  var index = $("#idSelect").prop("selectedIndex");

  //選択された要素の値
  var selectedValue = $("#idSelect").val();

  //順番を入れ替える
  if(type == "up"){

  }else if(type == "down"){

  }

}

Answer 1

insertBeforeやinsertAfterを使えば簡単にできます。

demo

function OrderChange(type){
  const $selected = $("#idSelect > option:selected")
  if (!$selected.length) return
	
  if (type === 'up') {
    $selected.insertBefore($selected.prev())
  } else if (type === 'down') {
    $selected.insertAfter($selected.next())
  }
}