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イベントに設定することで何とかなりました。
1 2 3 4 5 6 |
function clearSelectBox(){ $('#<フォームのid>select').each(function() { $(this).children('option').removeAttr('selected'); //optionのselected要素の削除 this.selectedIndex= 0; //selectIndexを0に設定。 }); } |
解決―!!
関連記事
-
-
【ギブアップ】CentOS+casper.jsでキャプチャを取ると日本語が化けて「□」になる。
=== 追記 === casperjs、phantomjsじゃないけど、wkht …
-
-
mautic利用時の.htaccess設定(クロスドメインとアクセス制御)
mauticをインストールは下記参照。 http://qiita.com/bez …
-
-
[js][GoogleAnalytics]GoogleAnalyticsのデフォルトのスクリプトについて調査
googleAnalyticsで貼り付けるスクリプトの中身ってなにやっているの& …
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (3) Casperjsの利用
## インストールはこちら 大雑把な使い方を下記で確認。 [クイックスタート]h …
-
-
【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 – (2) Casperjsのインストール
ということで続き。下記を参考に。 【参考】http://thesportsbus …