質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

  • PHP

    21323questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17513questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 478

shingosuchin

score 10

問い合わせフォームなどにある、ラジオボタンで地域を選択したら、「それに合わせた都道府県名だけ」が選べるようになる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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/04/18 13:27

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

    キャンセル

  • maisumakun

    2017/04/18 13:31

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

    キャンセル

  • shingosuchin

    2017/04/18 13:48

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

    キャンセル

  • yambejp

    2017/04/18 14:02

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

    キャンセル

回答 1

checkベストアンサー

+3

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

$(function(){
  $('[name=area]').on('change',function(){
    var id=$(this).filter(":checked").attr('id');
    $('[name=pref] option').show().filter(function(){
      return $(this).data('area')!=id;
    }).hide();
  });
});

地域がめちゃくちゃですが大丈夫ですか?
甲信越=山梨、長野、新潟、だとして
東海=静岡、愛知、三重、でよいのでしょうか?

※細かいcssが必要なさそうなのでshowとhideに書き換えてあります

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/04/18 14:07

    ありがとうございます!
    すみません、地域の方も確認します。

    キャンセル

  • 2017/04/18 14:24 編集

    https://teratail.com/questions/72856
    追加のご質問があるので、よろしければよろしくお願いいたします。

    キャンセル

  • 2017/04/18 14:32

    回答しときました

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • PHP

    21323questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17513questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7106questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • トップ
  • PHPに関する質問
  • ラジオボタンで地域を選択したら、それに合わせた都道府県名が選べるようになるJavaScript