For Want Of A Better Word

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

      2015/04/18

ちょっと、セレクトボックスのリセットをしたく調査。

下記のリンク先の記述のように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

  関連記事

js-logo
【反省】jsのreplaceの正規表現パターンはクォーテーションで囲む必要ない

タイトル通り。 いまさら!? ハマって、情けないと思ったのでメモ。 こんなんだっ …

js-logo
angular.jsに触ってみる

Monacaで使っていたのと、このページのイカシっぷりに、俄然興味が湧いた。 h …

js-logo
【jQuery】 lightBox風のHTML表示

plugin:facebox [参考]http://www.syboos.jp/ …

google-logo
jsonengine サーバサイド開発なしでGoogleAppEngineのデータを利用した動的画面の作成

[紹介] http://codezine.jp/article/detail/5 …

js-logo
ガジェット(web埋め込み部品)を作りたい① |別ドメイン間でajaxデータ通信

ちょっとガジェット的なものを作りたい。 データは自サーバーにある。 とりあえずa …