HTMLでselectタグの初期値を設定する方法とは【メンターが回答】

「HTMLでselectタグの初期値を設定する方法が分かりません。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。selectの初期値を空白で表示する書き方についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

HTMLでselectタグの初期値を設定する方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

selectタグを該当のソースコードのように書いた場合、選択肢が以下のようになってしまいます。

0
aaa
bbb

これをvalueが0のまま空白の表示にすることは可能でしょうか?

 

該当のソースコード

<select id="drpTest" runat="server" clientidmode="Static">
    <option value="0"></option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
</select>

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

メンターからの回答

Chrome, Safariなどでは空白で表示されるため、IEなのかな?と思います。

ものすごく乱暴に解決する方法としては「 」(空白文字) を入れてしまうことかと思います。

<select id="drpTest" runat="server" clientidmode="Static">
    <option value="0"> </option>
    <option value="1">aaa</option>
    <option value="2">bbb</option>
</select>

 

以上、HTMLでselectタグの初期値を設定する方法について解説しました。

TechAcademyでは、現役HTML/CSSエンジニアのメンターが質問にすぐ回答します。

他にもPHPとHTMLをまとめてコメントアウトする方法をメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

鵜澤 峻平(うさわしゅんぺい)

現在はフリーランスのエンジニアをしていてプログラミング歴は5年目になります、普段は Rails、Laravel、Node.js等を使って Web、モバイルアプリケーションを作成しています。開発実績としては、いくつかの Web サービス、コンシューマー向けモバイルアプリケーション、NPO サイトリニューアル、ロボット用プログラムなどがあります。

TechAcademyでメンターをはじめたのは、「プログラミングでやりたいことがある人を応援したい」、「講師と受講者が話し合って学び方を決めていく」に惹かれたからです。

 

田島悠介

HTMLでselectタグの初期値を設定する方法について解説したよ。

大石ゆかり

ChromeやFirefoxのブラウザだと問題なく空白になってますね。

田島悠介

そうそう。IEの場合だけかな。

大石ゆかり

わかりました。ありがとうございます!

 

また、TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。

CSSの書き方やWebデザインのスキルなど基礎から学ぶことができます。

独学に限界を感じている場合はご検討ください。