Quantcast
Channel: 初心者タグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 21121

select option要素 submit等イベント後に選択肢をselected属性のあるoption要素に(元に)戻す

$
0
0

行ったこと

  • select, option要素の実装、修正

困ったこと

モーダルの中に、
input要素で記述式の質問回答欄を、
selectoption要素で選択肢の回答欄を実装。

回答を記入及び選択肢を選んだ後、submit等イベントを実行すると、
(モーダルを閉じるとともに)
input欄を空欄にし、select要素の表示を元に(選択される前の状態)戻したい。

うまく言語化が出来ておりませんが、コードは以下の通りです。

HTML

<input id="example" type="text">
<select id="question">
   <option selected>選んでください</option>
   <option value="1">a</option>
   <option value="2">b</option>
   <option value="3">c</option>
   <option value="4">d</option>
</select>
<button id="submitButton" type="submit">送信</button>

インプット欄、選択欄、ボタンを実装しました。

ボタンを押すと、インプット欄を空欄に戻し、かつ選択欄を「選んでください」が
表示されるように戻す。

jQuery

$('#submitButton').on('click', () => {
    $('#example').val("");
    $('#question').val($('#question option[selected]').val());
});

Viewing all articles
Browse latest Browse all 21121

Trending Articles