0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-05-11

行ったこと

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

困ったこと

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

回答を記入及び選択肢を選んだ後、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());
});
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0