html selectの内容を初期値に戻す

解決済

質問者：hookeey
質問日時：2021/11/10 18:29
回答数：2件

selectの内容をボタンを押せば初期値に戻すやり方がいまいちわかりません

例えばselectボックスにeeeを選択した後、戻すボタンを押せばaaaに戻るようにしたいです

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<select name="select-name">
<option value="aaa">aaa</option>
<option value="iii">iii</option>
<option value="uuu">uuu</option>
<option value="eee">eee</option>
<option value="ooo">ooo</option>
</select>
<button id="modosu">戻す</button>

<script>
const select = document.getElementById("select-name");
const btn = document.getElementById("modosu");

function btn addEventListener("click",function(){
select.remove();
});
</script>
</form>
</body>
</html>

また、仮にボタンを押せば選択していたvalueの値を取ってhtmlに表示させるにはどうすればいいですか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： Ogre7077
回答日時：2021/11/11 00:59

初期値に戻すなら reset ボタンが一番です

例)
<button type=reset>戻す</button>

初期値を制御したいなら reset イベントで挙動を追加しましょう
例)
let form = document.querySelector("対象フォーム");
form.addEventListener('reset', function(ev){
_ ev.target.elements['select-name'].selectedIndex = 0;
});

選択していた値を取って html に表示するなら
例)
let bt = document.querySelector("対象ボタン");
bt.addEventListener('click', function(ev){
_ let v = ev.target.form.elements['select-name'].value;
_ document.querySelector("出力先").textContent = v;
});