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

2014/05/20 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イベントに設定することで何とかなりました。

function clearSelectBox(){
    $('#<フォームのid>select').each(function() {
        $(this).children('option').removeAttr('selected'); //optionのselected要素の削除
        this.selectedIndex= 0; //selectIndexを0に設定。
    });
}

function clearSelectBox(){

$('#<フォームのid>select').each(function() {

$(this).children('option').removeAttr('selected'); //optionのselected要素の削除

this.selectedIndex= 0; //selectIndexを0に設定。

});

}

解決―!!

- javascript | js

PREV: Redmineのチケットをメールから登録-cronエラー、登録されない問題など、文字化け
NEXT: mysql 内部結合・外部結合違い inner join,left join,right join

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

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

: 【Googleトレンド】【Casperjs】急上昇中キーワードをスクレイピングで取得 (1) -検討編

特定カテゴリの急上昇中キーワードを取得して、自分のサイトに表示したい。その時、自 …

: [js]JSONPについて整理

JSONPについて整理。 Contents1 ＪSＯＮＰとは2 な …

: 【ギブアップ】CentOS＋casper.jsでキャプチャを取ると日本語が化けて「□」になる。

=== 追記 === casperjs、phantomjsじゃないけど、wkht …

: [js] chart.jsのグラフをwkhtmltopdfでpdfに保存する

表題のことをしたいとなった。結論目的は果たされたのだけどハマリポ …

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

関連記事