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.1

回答者： fujillin
回答日時：2021/11/10 19:04

こんばんは

formの開始タグが見当たらないのはご愛嬌として…

スクリプトなんぞ使わずに
　<button type="reset">戻す</button>
ではダメなのでしょうか？

※ 念のためにoption要素にはデフォルトのselected属性を設定しておいた方が宜しいと思いますけれど。

- 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;
});