option要素のプルダウンメニューテンプレート[セパレーター・年号・都道府県]

フォームで使用するoptionですが、年号など決まった形のものはテンプレートがあると便利です。選択できないセパレーター、西暦・和暦(平成/昭和)・月・日、都道府県のoption要素です。記事の最後には一式ダウンロードのファイルもリンクしています。

動作サンプル

選択できないセパレーター(リストを開いて罫線部分)

年号(西暦・和暦)と月日

都道府県

ソースコード(一部)

選択できないセパレーター

<p>
<select>
<option value="" selected="selected">選択して下さい</option>
<option disabled="disabled" >--------</option>
<option value="選択肢01">選択肢01</option>
<option value="選択肢02">選択肢02</option>
<option value="選択肢03">選択肢03</option>
<option value="選択肢04">選択肢04</option>
<option value="選択肢05">選択肢05</option>
<option disabled="disabled" >--------</option>
<option value="選択肢06">選択肢06</option>
<option value="選択肢07">選択肢07</option>
<option value="選択肢08">選択肢08</option>
<option value="選択肢09">選択肢09</option>
<option value="選択肢10">選択肢10</option>
<option disabled="disabled" >--------</option>
<option value="選択肢11">選択肢11</option>
<option value="選択肢12">選択肢12</option>
<option value="選択肢13">選択肢13</option>
<option value="選択肢14">選択肢14</option>
<option value="選択肢15">選択肢15</option>
</select>

年号(西暦/和暦)

<select name="year2">
<option selected="selected" value="西暦/和暦">西暦/和暦</option>
<option value="2009年/平成21年">2009年/平成21年</option>
<option value="2008年/平成20年">2008年/平成20年</option>
<option value="2007年/平成19年">2007年/平成19年</option>
<option value="2006年/平成18年">2006年/平成18年</option>
<option value="2005年/平成17年">2005年/平成17年</option>
<option value="2004年/平成16年">2004年/平成16年</option>
<option value="2003年/平成15年">2003年/平成15年</option>
<option value="2002年/平成14年">2002年/平成14年</option>
<option value="2001年/平成13年">2001年/平成13年</option>
<option value="2000年/平成12年">2000年/平成12年</option>
<option value="1999年/平成11年">1999年/平成11年</option>
<option value="1998年/平成10年">1998年/平成10年</option>
<option value="1997年/平成9年">1997年/平成9年</option>
<option value="1996年/平成8年">1996年/平成8年</option>
<option value="1995年/平成7年">1995年/平成7年</option>
<option value="1994年/平成6年">1994年/平成6年</option>
<option value="1993年/平成5年">1993年/平成5年</option>
<option value="1992年/平成4年">1992年/平成4年</option>
<option value="1991年/平成3年">1991年/平成3年</option>
<option value="1990年/平成2年">1990年/平成2年</option>
<option value="1989年/平成元年">1989年/平成元年</option>
<option value="1988年/昭和63年">1988年/昭和63年</option>
<option value="1987年/昭和62年">1987年/昭和62年</option>
<option value="1986年/昭和61年">1986年/昭和61年</option>
<option value="1985年/昭和60年">1985年/昭和60年</option>
<option value="1984年/昭和59年">1984年/昭和59年</option>
<option value="1983年/昭和58年">1983年/昭和58年</option>
<option value="1982年/昭和57年">1982年/昭和57年</option>
<option value="1981年/昭和56年">1981年/昭和56年</option>
<option value="1980年/昭和55年">1980年/昭和55年</option>
<option value="1979年/昭和54年">1979年/昭和54年</option>
<option value="1978年/昭和53年">1978年/昭和53年</option>
<option value="1977年/昭和52年">1977年/昭和52年</option>
<option value="1976年/昭和51年">1976年/昭和51年</option>
<option value="1975年/昭和50年">1975年/昭和50年</option>
<option value="1974年/昭和49年">1974年/昭和49年</option>
<option value="1973年/昭和48年">1973年/昭和48年</option>
<option value="1972年/昭和47年">1972年/昭和47年</option>
<option value="1971年/昭和46年">1971年/昭和46年</option>
<option value="1970年/昭和45年">1970年/昭和45年</option>
<option value="1969年/昭和44年">1969年/昭和44年</option>
<option value="1968年/昭和43年">1968年/昭和43年</option>
<option value="1967年/昭和42年">1967年/昭和42年</option>
<option value="1966年/昭和41年">1966年/昭和41年</option>
<option value="1965年/昭和40年">1965年/昭和40年</option>
<option value="1964年/昭和39年">1964年/昭和39年</option>
<option value="1963年/昭和38年">1963年/昭和38年</option>
<option value="1962年/昭和37年">1962年/昭和37年</option>
<option value="1961年/昭和36年">1961年/昭和36年</option>
<option value="1960年/昭和35年">1960年/昭和35年</option>
</select>

都道府県

<select name="pref">
<option value="" selected="selected">都道府県を選択</option>
<optgroup label="北海道・東北">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="秋田県">秋田県</option>
<option value="宮城県">宮城県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
</optgroup>
<optgroup label="甲信越・北陸">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
</optgroup>
<optgroup label="近畿">
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>

ダウンロード

サンプルファイルをダウンロード

Dreamweaver スニペット

http://www.kotalog.net/archives/1582
こちらの記事で、Deamweaverのスニペットとして活用できるようにしました。

Jimdo

オススメ書籍

10日でSEO&アクセスアップ Jimdoデザインブック

かっこいいだけではなく、人が集まるホームページを作る!

「Jimdo」(ジンドゥー)でのホームページの作成方法と運用方法を解説した書籍。解説記事を順番に読み進めて行くことで、Jimdoを使ったホームページの作成・運用・宣伝・集客の基本を、10日間で習得するのが本書のコンセプトです。12章構成の解説の中で、Jimdoの基本操作とホームページの作成、デザインとコンテンツ(内容)のレベルアップ、そしてSEOやリスティング広告を含む宣伝・集客の基本を解説しています。

1 個のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。

    CAPTCHA


    ABOUTこの記事をかいた人

    株式会社マジカルリミックス 代表取締役CEO/JimdoExpert 宮城県出身。コンピューター系の専門学校を卒業後、仙台のデザイン会社に入社。 Webサイトのデザイン・コーディングをはじめとし、各種デジタルメディアのデザインに従事。2002年退職後すぐにマジカルリミックスを創業。2007年に法人化で株式会社マジカルリミックスを設立。Webサイト運用に関するコンサルティング、社内向けITトレーニング、セミナー出演、執筆など。2005年から仙台の専門学校で、非常勤講師としてWeb制作講義を担当。 主な著書に『10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック』(エムディエヌコーポレーション)『HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。』(共著、同)『基礎から覚える、深く理解できる。Webデザインの新しい教科書』(同)。