For Want Of A Better Word

selectedを動的につけているセレクトボックスの選択解除・リセット

      2017/06/05

ちょっと、セレクトボックスの選択解除・リセットをしたい。

 

調べると、下記のリンク先の記述のようにselectindexを0にする方法が一般的みたい。

チーズくんの備忘録 [javascript]子要素にあるselectを全てリセット

にゃほ~ – jQuery – selectの選択を解除する

 

しかし、上記のやり方では自分のフォームではうまく行かなかった。

なにが起きるかというと、

 

一回selectIndexを0にしても、処理終了後、「selectedが付いているoption」が選択状態になってしまう。

 

自分のセレクトボックスは

 

・onChangeでsubmitして

・ページを再度読み込み

・その再読み込みの時に、選択したoptionに”selected”を追加する

 

方式。

 

その時に、selectIndexを0にしても、そのselectedが付いている項目が選択状態になってしまう。

 

上記参考サイトのやり方は、選択したページ内で遷移、selectedの付け替えをせずにリセットするという場合のもの。

あるいは、「選択済みを表す”selected”」が、「リセットした後に選択状態になって欲しいoption項目」に付いているのが前提の様子。

 

 

なので、

「optionについているselectedを削除してあげたうえで、selectIndexを0にする」

という処理にすればOK!

下記のfunctionをリセットボタンのonClickイベントに設定することで何とかなりました。

 

 

解決―!!

 - javascript | js

  関連記事

【Javascript】グラフ・チャート描画用のjsライブラリまとめ

ちょっとWEBでグラフを描画しようと思いまして、jsのライブラリを物色。 色々サ …

【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (4) Casper動くもGoogleトレンドのバグ?にはまる

casperjsで値を取るため 念のためもう一回埋め込み用のタグからURLを確認 …

【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (3) Casperjsの利用

## インストールはこちら 大雑把な使い方を下記で確認。 [クイックスタート]h …

サードパーティークッキーとは(定義と使い方)

[参考リンク1]https://webtan.impress.co.jp/e/2 …

[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査

googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの& …