都道府県を選択すると市区町村が自動表示されるフォーム

Question

https://lancers.work/pref-city-form-jquery-json/
こちらのサイト様を参考に都道府県を選択すると市区町村が自動で表示されるフォームを作成して
WordPressのサイトで検索機能を作成しようと思っております。

しかし都道府県・市区町村ともにvalueの値にid（数値）が返ってきてしまいます。
都道府県名（漢字）と市区町村名（漢字）を返したいのですが、どなたか教えていただけませんでしょうか？
プログラム初心者ですのでよろしくお願いいたします。

<script> // 都道府県フォーム生成 $(function() { $.getJSON('pref_city.json', function(data) { for(var i=0; i<47; i++) { var code = i+1; code = ('00'+code).slice(-2); // ゼロパディング $('#select-pref').append('<option value="'+code+'">'+data[i][code].pref+'</option>'); } }); }); // 都道府県メニューに連動した市区町村フォーム生成 $('#select-pref').on('change', function() { $('#select-city option:nth-child(n+2)').remove(); // ※1 市区町村フォームクリア var select_pref = ('00'+$('#select-pref option:selected').val()).slice(-2); var key = Number(select_pref)-1; $.getJSON('pref_city.json', function(data) { for(var i=0; i<data[key][select_pref].city.length; i++){ $('#select-city').append('<option value="'+data[key][select_pref].city[i].id+'">'+data[key][select_pref].city[i].name+'</option>'); } }); }); </script>

<select id="select-pref"><option value="">都道府県を選択してください</option></select>
<select id="select-city"><option value="">市区町村を選択してください</option></select>

Answer 1

pref_city.jsonにすべての組み合わせがはいっているなら
参照しやすい配列をおけば良いでしょう。
本来であればapiを用意してprefを送るとcity一覧がjsonで
返ってくるほうがオーバーヘッドが小さく済みます

Comments

[jfjf]

早速のご回答有難うございます。

pref_city.jsonのデータは以下のような感じなんですが、配列を変える事で対応できますでしょうか？

[{"01":{"id":"01","pref":"北海道","en":"hokkaido","city":[{"id":"01100","name":"札幌市"},{"id":"01101","name":"中央区"},・・・・・・・

<select id="select-pref"><option value="01北海道">北海道</option></select>
<select id="select-city"><option value="01100札幌市">札幌市</option></select>
このような形でも検索は可能かと思いますのでjavaスクリプトをカスタマイズして対応できませんでしょうか？

初心者の為的外れな質問でしたら申し訳有りません。
よろしくお願いいたします。

[yambejp]

select-prefの北海道が01北海道なら

var a={
"01北海道":["札幌","中央区",・・・
"02青森":["なんたら","かんたら",・・・
}

のように整理しておけば
a[”01北海道"]を参照すれば北海道の市の一覧が得られます

[jfjf]

有難うございます。
チャレンジしてみます。