Skip to content

Instantly share code, notes, and snippets.

@onocom

onocom/japan-prefecture.html

Created March 4, 2017 04:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save onocom/904991e984f1da14ef6e1d156bc6e570 to your computer and use it in GitHub Desktop.
Save onocom/904991e984f1da14ef6e1d156bc6e570 to your computer and use it in GitHub Desktop.
Download ZIP
都道府県を絞り込む処理
Raw
japan-prefecture.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>日本の都道府県一覧</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
jQuery(function ($) {
$('#pref-select').change(function () {
var select_val = $('#pref-select option:selected').val();
$.each($("#pref-table tbody tr"), function (index, element) {
if (select_val == "") {
$(element).css("display", "table-row");
return true;
}
var row_text = $(element).text();
if (row_text.indexOf(select_val) != -1) {
$(element).css("display", "table-row");
} else {
$(element).css("display", "none");
}
});
});
});
</script>
</head>
<body>
<main class="container">
<h1>日本の都道府県</h1>
<p>日本の都道府県の一覧です。絞り込み用ボックスから都道府県の絞り込みが出来ます。</p>
<h2>都道府県一覧</h2>
<div id="pref-search">
<select id="pref-select" class="form-control">
<option value="">都道府県で絞り込み</option>
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="宮城県">宮城県</option>
<option value="秋田県">秋田県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</select>
</div>
<div id="pref-data">
<table id="pref-table" class="table table-borderd">
<thead>
<tr class="active">
<td>番号</td>
<td>都道府県名</td>
<td>読み</td>
<td>都道府県庁 所在地</td>
<td>最大都市</td>
<td>地方</td>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>北海道</td>
<td>ほっかいどう</td>
<td>札幌市</td>
<td>札幌市</td>
<td>北海道</td>
</tr>
<tr>
<td>02</td>
<td>青森県</td>
<td>あおもりけん</td>
<td>青森市</td>
<td>青森市</td>
<td>東北</td>
</tr>
<tr>
<td>03</td>
<td>岩手県</td>
<td>いわてけん</td>
<td>盛岡市</td>
<td>盛岡市</td>
<td>東北</td>
</tr>
<tr>
<td>04</td>
<td>宮城県</td>
<td>みやぎけん</td>
<td>仙台市</td>
<td>仙台市</td>
<td>東北</td>
</tr>
<tr>
<td>05</td>
<td>秋田県</td>
<td>あきたけん</td>
<td>秋田市</td>
<td>秋田市</td>
<td>東北</td>
</tr>
<tr>
<td>06</td>
<td>山形県</td>
<td>やまがたけん</td>
<td>山形市</td>
<td>山形市</td>
<td>東北</td>
</tr>
<tr>
<td>07</td>
<td>福島県</td>
<td>ふくしまけん</td>
<td>福島市</td>
<td>いわき市</td>
<td>東北</td>
</tr>
<tr>
<td>08</td>
<td>茨城県</td>
<td>いばらきけん</td>
<td>水戸市</td>
<td>水戸市</td>
<td>関東</td>
</tr>
<tr>
<td>09</td>
<td>栃木県</td>
<td>とちぎけん</td>
<td>宇都宮市</td>
<td>宇都宮市</td>
<td>関東</td>
</tr>
<tr>
<td>10</td>
<td>群馬県</td>
<td>ぐんまけん</td>
<td>前橋市</td>
<td>高崎市</td>
<td>関東</td>
</tr>
<tr>
<td>11</td>
<td>埼玉県</td>
<td>さいたまけん</td>
<td>さいたま市</td>
<td>さいたま市</td>
<td>関東</td>
</tr>
<tr>
<td>12</td>
<td>千葉県</td>
<td>ちばけん</td>
<td>千葉市</td>
<td>千葉市</td>
<td>関東</td>
</tr>
<tr>
<td>13</td>
<td>東京都</td>
<td>とうきょうと</td>
<td>東京（新宿区）</td>
<td>東京（世田谷区）</td>
<td>関東</td>
</tr>
<tr>
<td>14</td>
<td>神奈川県</td>
<td>かながわけん</td>
<td>横浜市</td>
<td>横浜市</td>
<td>関東</td>
</tr>
<tr>
<td>15</td>
<td>新潟県</td>
<td>にいがたけん</td>
<td>新潟市</td>
<td>新潟市</td>
<td>中部</td>
</tr>
<tr>
<td>16</td>
<td>富山県</td>
<td>とやまけん</td>
<td>富山市</td>
<td>富山市</td>
<td>中部</td>
</tr>
<tr>
<td>17</td>
<td>石川県</td>
<td>いしかわけん</td>
<td>金沢市</td>
<td>金沢市</td>
<td>中部</td>
</tr>
<tr>
<td>18</td>
<td>福井県</td>
<td>ふくいけん</td>
<td>福井市</td>
<td>福井市</td>
<td>中部</td>
</tr>
<tr>
<td>19</td>
<td>山梨県</td>
<td>やまなしけん</td>
<td>甲府市</td>
<td>甲府市</td>
<td>中部</td>
</tr>
<tr>
<td>20</td>
<td>長野県</td>
<td>ながのけん</td>
<td>長野市</td>
<td>長野市</td>
<td>中部</td>
</tr>
<tr>
<td>21</td>
<td>岐阜県</td>
<td>ぎふけん</td>
<td>岐阜市</td>
<td>岐阜市</td>
<td>中部</td>
</tr>
<tr>
<td>22</td>
<td>静岡県</td>
<td>しずおかけん</td>
<td>静岡市</td>
<td>浜松市</td>
<td>中部</td>
</tr>
<tr>
<td>23</td>
<td>愛知県</td>
<td>あいちけん</td>
<td>名古屋市</td>
<td>名古屋市</td>
<td>中部</td>
</tr>
<tr>
<td>24</td>
<td>三重県</td>
<td>みえけん</td>
<td>津市</td>
<td>四日市市</td>
<td>近畿</td>
</tr>
<tr>
<td>25</td>
<td>滋賀県</td>
<td>しがけん</td>
<td>大津市</td>
<td>大津市</td>
<td>近畿</td>
</tr>
<tr>
<td>26</td>
<td>京都府</td>
<td>きょうとふ</td>
<td>京都市</td>
<td>京都市</td>
<td>近畿</td>
</tr>
<tr>
<td>27</td>
<td>大阪府</td>
<td>おおさかふ</td>
<td>大阪市</td>
<td>大阪市</td>
<td>近畿</td>
</tr>
<tr>
<td>28</td>
<td>兵庫県</td>
<td>ひょうごけん</td>
<td>神戸市</td>
<td>神戸市</td>
<td>近畿</td>
</tr>
<tr>
<td>29</td>
<td>奈良県</td>
<td>ならけん</td>
<td>奈良市</td>
<td>奈良市</td>
<td>近畿</td>
</tr>
<tr>
<td>30</td>
<td>和歌山県</td>
<td>わかやまけん</td>
<td>和歌山市</td>
<td>和歌山市</td>
<td>近畿</td>
</tr>
<tr>
<td>31</td>
<td>鳥取県</td>
<td>とっとりけん</td>
<td>鳥取市</td>
<td>鳥取市</td>
<td>中国</td>
</tr>
<tr>
<td>32</td>
<td>島根県</td>
<td>しまねけん</td>
<td>松江市</td>
<td>松江市</td>
<td>中国</td>
</tr>
<tr>
<td>33</td>
<td>岡山県</td>
<td>おかやまけん</td>
<td>岡山市</td>
<td>岡山市</td>
<td>中国</td>
</tr>
<tr>
<td>34</td>
<td>広島県</td>
<td>ひろしまけん</td>
<td>広島市</td>
<td>広島市</td>
<td>中国</td>
</tr>
<tr>
<td>35</td>
<td>山口県</td>
<td>やまぐちけん</td>
<td>山口市</td>
<td>下関市</td>
<td>中国</td>
</tr>
<tr>
<td>36</td>
<td>徳島県</td>
<td>とくしまけん</td>
<td>徳島市</td>
<td>徳島市</td>
<td>四国</td>
</tr>
<tr>
<td>37</td>
<td>香川県</td>
<td>かがわけん</td>
<td>高松市</td>
<td>高松市</td>
<td>四国</td>
</tr>
<tr>
<td>38</td>
<td>愛媛県</td>
<td>えひめけん</td>
<td>松山市</td>
<td>松山市</td>
<td>四国</td>
</tr>
<tr>
<td>39</td>
<td>高知県</td>
<td>こうちけん</td>
<td>高知市</td>
<td>高知市</td>
<td>四国</td>
</tr>
<tr>
<td>40</td>
<td>福岡県</td>
<td>ふくおかけん</td>
<td>福岡市</td>
<td>福岡市</td>
<td>九州</td>
</tr>
<tr>
<td>41</td>
<td>佐賀県</td>
<td>さがけん</td>
<td>佐賀市</td>
<td>佐賀市</td>
<td>九州</td>
</tr>
<tr>
<td>42</td>
<td>長崎県</td>
<td>ながさきけん</td>
<td>長崎市</td>
<td>長崎市</td>
<td>九州</td>
</tr>
<tr>
<td>43</td>
<td>熊本県</td>
<td>くまもとけん</td>
<td>熊本市</td>
<td>熊本市</td>
<td>九州</td>
</tr>
<tr>
<td>44</td>
<td>大分県</td>
<td>おおいたけん</td>
<td>大分市</td>
<td>大分市</td>
<td>九州</td>
</tr>
<tr>
<td>45</td>
<td>宮崎県</td>
<td>みやざきけん</td>
<td>宮崎市</td>
<td>宮崎市</td>
<td>九州</td>
</tr>
<tr>
<td>46</td>
<td>鹿児島県</td>
<td>かごしまけん</td>
<td>鹿児島市</td>
<td>鹿児島市</td>
<td>九州</td>
</tr>
<tr>
<td>47</td>
<td>沖縄県</td>
<td>おきなわけん</td>
<td>那覇市</td>
<td>那覇市</td>
<td>沖縄</td>
</tr>
</tbody>
</table>
</div>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment