[JavaScript] セレクトボックスの選択を位置付ける – コピペで使える JavaScript逆引きリファレンス

セレクトボックスの選択を位置付けるサンプルです。
インデックス番号で位置付ける方法と、value値で位置付ける方法の２種類のサンプルです。

セレクトボックスをインデックス番号で位置付ける

セレクトボックスをインデックス番号で位置付けるには、.selectedIndexを使用します。

function setSelIdx(idname, idx){
  var obj = document.getElementById(idname);
  obj.selectedIndex = idx;
}

function setSelIdx(idname, idx){

var obj = document.getElementById(idname);

obj.selectedIndex = idx;

}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>サンプル</title>
  <script src="sample.js"></script>
</head>
<body>
  <select id="sel1">
    <option value="01">東京</option>
    <option value="02">大阪</option>
    <option value="03">名古屋</option>
  </select>
  <input type="button" value="Index=0に位置付ける" onclick="setSelIdx('sel1', 0);" />
  <input type="button" value="Index=1に位置付ける" onclick="setSelIdx('sel1', 1);" />
  <input type="button" value="Index=2に位置付ける" onclick="setSelIdx('sel1', 2);" />
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

</select>

</body>

</html>

実行サンプル

押したボタンによりセレクトボックスが位置付きます

解説

インデックス番号で位置付けるには、selectedIndexを使用します。
インデックス番号は1からではなく、0から始まるのでご注意ください。
存在しないインデックス番号をセットした場合は未選択状態になります。

セレクトボックスをvalue値で位置づける

セレクトボックスをvalue値で位置付けるには、.valueを使用します。

function setSelVal(idname, val){
  var obj = document.getElementById(idname);
  obj.value = val;
}

function setSelVal(idname, val){