ラジオボタンで地域を選択したら、それに合わせた都道府県名が選べるようになるJavaScript

問い合わせフォームなどにある、ラジオボタンで地域を選択したら、「それに合わせた都道府県名だけ」が選べるようになるJavaScriptはどうしたら良いでしょうか。

###ラジオボタン

<form name="form_area" id="formArea" action="">
	<label for="area1"><input id="area1" name="area" type="radio" class="validate[required]" value="北海道・東北">北海道・東北</label>
	<label for="area2"><input id="area2" name="area" type="radio" class="validate[required]" value="関東">関東</label>
	<label for="area3"><input id="area3" name="area" type="radio" class="validate[required]" value="甲信越">甲信越</label>
	<label for="area4"><input id="area4" name="area" type="radio" class="validate[required]" value="東海">東海</label>
	<label for="area5"><input id="area5" name="area" type="radio" class="validate[required]" value="近畿・北陸">近畿・北陸</label>
	<label for="area6"><input id="area6" name="area" type="radio" class="validate[required]" value="中国・四国">中国・四国</label>
	<label for="area7"><input id="area7" name="area" type="radio" class="validate[required]" value="九州・沖縄">九州・沖縄</label>
</form>

###選択肢

<select name="pref" class="validate[required]">
	<option value="">選択してください</option>
	<option value="1"  data-area="area1">北海道</option>
	<option value="2"  data-area="area1">青森県</option>
	<option value="3"  data-area="area1">岩手県</option>
	<option value="4"  data-area="area1">宮城県</option>
	<option value="5"  data-area="area1">秋田県</option>
	<option value="6"  data-area="area1">山形県</option>
	<option value="7"  data-area="area1">福島県</option>
	<option value="8"  data-area="area2">茨城県</option>
	<option value="9"  data-area="area2">栃木県</option>
	<option value="10"  data-area="area2">群馬県</option>
	<option value="11"  data-area="area2">埼玉県</option>
	<option value="12"  data-area="area2">千葉県</option>
	<option value="13"  data-area="area2">東京都</option>
	<option value="14"  data-area="area2">神奈川県</option>
	<option value="15"  data-area="area4">新潟県</option>
	<option value="16"  data-area="area4">富山県</option>
	<option value="17"  data-area="area4">石川県</option>
	<option value="18"  data-area="area4">福井県</option>
	<option value="19"  data-area="area4">山梨県</option>
	<option value="20"  data-area="area4">長野県</option>
	<option value="21"  data-area="area4">岐阜県</option>
	<option value="22"  data-area="area4">静岡県</option>
	<option value="23"  data-area="area4">愛知県</option>
	<option value="24"  data-area="area5">三重県</option>
	<option value="25"  data-area="area5">滋賀県</option>
	<option value="26"  data-area="area5">京都府</option>
	<option value="27"  data-area="area5">大阪府</option>
	<option value="28"  data-area="area5">兵庫県</option>
	<option value="29"  data-area="area5">奈良県</option>
	<option value="30"  data-area="area5">和歌山県</option>
	<option value="31"  data-area="area6">鳥取県</option>
	<option value="32"  data-area="area6">島根県</option>
	<option value="33"  data-area="area6">岡山県</option>
	<option value="34"  data-area="area6">広島県</option>
	<option value="35"  data-area="area6">山口県</option>
	<option value="36"  data-area="area6">徳島県</option>
	<option value="37"  data-area="area6">香川県</option>
	<option value="38"  data-area="area6">愛媛県</option>
	<option value="39"  data-area="area6">高知県</option>
	<option value="40"  data-area="area7">福岡県</option>
	<option value="41"  data-area="area7">佐賀県</option>
	<option value="42"  data-area="area7">長崎県</option>
	<option value="43"  data-area="area7">熊本県</option>
	<option value="44"  data-area="area7">大分県</option>
	<option value="45"  data-area="area7">宮崎県</option>
	<option value="46"  data-area="area7">鹿児島県</option>
	<option value="47"  data-area="area7">沖縄県</option>
</select>

kei344

2017/04/18 04:27

質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、ご自身で書かれたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

maisumakun

2017/04/18 04:31

<{if $_params.area=="九州・沖縄"}> checked<{/if}>のあたりは標準のJavaScriptやPHPではありませんが、どういうライブラリを使っていらっしゃいますでしょうか。

shingosuchin

2017/04/18 04:48

すみません、JSの初心者なもので、全く理解できていません。コードを直したので、<{if $_params.area=="九州・沖縄"}> 等は無視していただいて構いません。

yambejp

2017/04/18 05:02

回答者に無視させるのじゃなくて他人が見てもわかるよう平文のhtmlとして提示すべきです

行動規範の内容に同意します

回答1件

ベストアンサー

ラジオボタンのidをもとに、セレクトボックスのoptionからdata-areaと
合致するものだけ残すならこんな感じです
（一部修正）

javascript
1$(function(){
2  $('[name=area]').on('change',function(){
3    var id=$(this).filter(":checked").attr('id');
4    $('[name=pref] option').show().filter(function(){
5      return $(this).data('area')!=id;
6    }).hide();
7  });
8});
9
10