JavaScript(jQuery)でプルダウンを初期化しようとしてはまったこと・対応策

▼この記事をSNSでシェアする▼

スポンサーリンク

スポンサーリンク

業務で実装しようとしてはまったことを備忘録がてら書きます。

JavaScriptややこしい・・・

業務ではインクリメンタルサーチというテキストで絞り込み検索できるタイプのややこしいパターンでしたが、今回はピンポイントでプルダウンの未選択を選ぶ方法を書きます。

1. Java Scriptプルダウンで選択値を初期化する方法

大きく分けて3つあると思っています。

厳密にいうとやっていることが異なるといえば異なる。

1.1 selectedIndexに-1を指定する

プルダウンは一番上の項目から0,1,2…とindexが振られています。

JavaScript(jQuery)で選択しているindexを-1に書き換えると未選択になります。

このHTMLのソースであれば「男」という選択肢がid =0,「女」という選択肢がid =1になります。

1.2 selectタグのvalueを空文字に書き換える

val()関数を使います。

JavaScript(jQuery)でselectタグのvalueを”で書き換えます。

1.3 optionタグのselected属性を取り除く

今回はもともと選択されているものを外すわけではなく、今回試していませんが、プルダウンが複数あって項目が非同期で連動している場合とかは有効
selectedがついているoptionタグのselected属性を取り除く記述を書く
このHTMLのソースであれば「女」という選択肢が初期表示で選択される状態になります

2. 実装方針

2.1 前提

多少荒いですが下記のようなselect, optionタグで構成されるHTMLを例に書きます。

2.2 実装例(イメージ)

以下の実装ではid=sportsのselectタグを操作する記述となっています。

⑴ selectedIndexに-1を指定する

⑵ selectタグのvalueを空文字に書き換える

⑶ optionタグのselected属性を取り除く

optionタグすべてについてselected属性を取り除く記述になっています
selected=”seleted”という形でHTMLが記述されている場合にも有効

3. まとめ

(1)が一番スマートだと思うのですがなぜかうまくいかなかった。

$(‘#sports’).selectedIndexをalert();してもundefinedになっていた・・・

DOMの取得がうまくいかなかったのか・・・モヤモヤします

スポンサーリンク


関連記事

▼この記事をSNSでシェアする▼

フォローする

メニュー・主な記事カテゴリ

おすすめ特集!




「ゆとり鳥日記」について
ITを中心に関心の赴くままに好きなように書いていく雑記ブログ!管理人が二人います。
◆フクロウ(ITコンサル)
◆santaka(SE)

詳しいプロフィール
お仕事の依頼・ご要望

ゆとり鳥日記をBTCで応援する