実現したいこと
都道府県別に用意された全46ページそれぞれに、都道府県名を選択する共通のプルダウンメニューを埋め込んでいます。
この時、ページのURLの文字列を判別して、例えば「saitama」が入っていたら、option要素のtext部分の「埼玉県」になっているところに「selected」を入れることで、該当の県名があらかじめプルダウンで選択されているようにしたいと思いました。
そこで、下記のようなコードを書き、なんとか動作もOKだったのですが、
ほぼ同じコードを46回コピペしているところがあまりにも芸がない感じで、
もう少しまとめた記述にしたいと思っています。
しかし、それにはどうやって記述したらよいのか分かりません。
なにかもっとうまい記述方法があれば、ぜひとも教えていただければと思います。
よろしくお願いいたします。
該当のソースコード
jquery
1$(window).bind("load", function(){ 2 3if(document.URL.match(/hokkaido/) ) { 4 $('#select_region option').filter(function(index){ 5 return $(this).text() === '北海道'; 6 }).prop('selected', true); 7 8 }else if(document.URL.match(/aomori/) ) { 9 $('#select_region option').filter(function(index){ 10 return $(this).text() === '青森県'; 11 }).prop('selected', true); 12 13 }else if(document.URL.match(/akita/) ) { 14 $('#select_region option').filter(function(index){ 15 return $(this).text() === '秋田県'; 16 }).prop('selected', true); 17 18 19<!-- これ以降、ずっと沖縄県までくりかえし--> 20 21 } 22}); 23
html
1<form>2 <select name="sel" id="select_region">3 <option value="ドメイン名/">都道府県を選ぶ</option>4 <option value="ドメイン名/hokkaido">北海道</option>5 <option value="ドメイン名/aomori">青森県</option>6 <option value="ドメイン名/akita">秋田県</option>7 <option value="ドメイン名/iwate">岩手県</option>8 <option value="ドメイン名/miyagi">宮城県</option>9 <option value="ドメイン名/yamagata">山形県</option>10 <option value="ドメイン名/fukushima">福島県</option>11 <option value="ドメイン名/ibaraki">茨城県</option>12 <option value="ドメイン名/tochigi">栃木県</option>13 <option value="ドメイン名/gunma">群馬県</option>14 <option value="ドメイン名/saitama">埼玉県</option>15 <option value="ドメイン名/chiba">千葉県</option>16 <option value="ドメイン名/tokyo">東京都</option>17 <option value="ドメイン名/kanagawa">神奈川県</option>18 <option value="ドメイン名/yamanashi">山梨県</option>19 <option value="ドメイン名/nagano">長野県</option>20 <option value="ドメイン名/niigata">新潟県</option>21 <option value="ドメイン名/shizuoka">静岡県</option>22 <option value="ドメイン名/aichi">愛知県</option>23 <option value="ドメイン名/mie">三重県</option>24 <option value="ドメイン名/gifu">岐阜県</option>25 <option value="ドメイン名/fukui">福井県</option>26 <option value="ドメイン名/toyama">富山県</option>27 <option value="ドメイン名/ishikawa">石川県</option>28 <option value="ドメイン名/osaka">大阪府</option>29 <option value="ドメイン名/shiga">滋賀県</option>30 <option value="ドメイン名/nara">奈良県</option>31 <option value="ドメイン名/kyoto">京都府</option>32 <option value="ドメイン名/hyogo">兵庫県</option>33 <option value="ドメイン名/wakayama">和歌山県</option>34 <option value="ドメイン名/ehime">愛媛県</option>35 <option value="ドメイン名/kochi">高知県</option>36 <option value="ドメイン名/kagawa">香川県</option>37 <option value="ドメイン名/tokushima">徳島県</option>38 <option value="ドメイン名/okayama">岡山県</option>39 <option value="ドメイン名/hiroshima">広島県</option>40 <option value="ドメイン名/tottori">鳥取県</option>41 <option value="ドメイン名/shimane">島根県</option>42 <option value="ドメイン名/yamaguchi">山口県</option>43 <option value="ドメイン名/fukuoka">福岡県</option>44 <option value="ドメイン名/oita">大分県</option>45 <option value="ドメイン名/kumamoto">熊本県</option>46 <option value="ドメイン名/saga">佐賀県</option>47 <option value="ドメイン名/nagasaki">長崎県</option>48 <option value="ドメイン名/miyazaki">宮崎県</option>49 <option value="ドメイン名/kagoshima">鹿児島県</option>50 </select>51 <div class="jump"><input onclick="top.location.href=sel1.value" type="button" value="詳細ページへ"></div>52 </form>53 54
0 コメント