非同期通信 セレクトボックス jquery

Question

前提・実現したいこと

jqueryで選択すると次のコンテンツが変わるセレクトボックスを作りたい
①セレクトボックスを3つ使う（以下ボックスA、ボックスB、ボックスC）。
②ボックスA以外のセレクトボックスのリストは最初は空。
③ボックスAを変更したらボックスBのリストを変更
④ボックスBを変更したらボックスCのリストを変更

ボックスAの選択肢は武器と防具
ボックスBの選択肢はAが武器なら刀、槍。Aが防具なら鎧、兜です

発生している問題・エラーメッセージ

プログラミング勉強し始めて2,3ヶ月です
実はデータベースから引っ張ってこいと言われています

該当のソースコード

試したこと

ここに問題に対して試したことを記載してください。
セレクトタグにidを設定し武器にはa、防具にはbを設定したところで行き詰まりました
何がなにかわかりません

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

DBからデータを参照する（将来的に）ところは分かりづらいので
まずはデータを予めもっておいてそこから抽出してください
サーバー側のAPIが設定できるスキルがついたら$.ajaxでサーバーに
データをとりにいく流れを学習してください

Comments

[yambejp]

<script>
$(function(){
var list=[
{select:"b",kind:"buki",value:"katana",text:"刀"},
{select:"b",kind:"buki",value:"yari",text:"槍"},
{select:"b",kind:"bougu",value:"yoroi",text:"鎧"},
{select:"b",kind:"bougu",value:"kabuto",text:"兜"},
{select:"c",kind:"katana",value:"katana1",text:"刀1"},
{select:"c",kind:"katana",value:"katana2",text:"刀2"},
{select:"c",kind:"katana",value:"katana3",text:"刀3"},
{select:"c",kind:"yari",value:"yari1",text:"槍1"},
{select:"c",kind:"yari",value:"yari2",text:"槍2"},
{select:"c",kind:"yari",value:"yari3",text:"槍3"},
{select:"c",kind:"yoroi",value:"yoroi1",text:"鎧1"},
{select:"c",kind:"yoroi",value:"yoroi2",text:"鎧2"},
{select:"c",kind:"yoroi",value:"yoroi3",text:"鎧3"},
{select:"c",kind:"kabuto",value:"kabuto1",text:"兜1"},
{select:"c",kind:"kabuto",value:"kabuto2",text:"兜2"},
{select:"c",kind:"kabuto",value:"kabuto3",text:"兜3"},
];
$('#a,#b').on('change',function(){
var self=$(this);
var selector={'a':'#b option:not(:first),#c option:not(:first)','b':'#c option:not(:first)'};
var target={'a':'b','b':'c'};
var id=$(this).attr('id');
$(selector[id]).remove();
if($(this).val()!==''){
$(list).filter(function(){
return $(this).get(0).select==target[id] && $(this).get(0).kind==self.val();
}).each(function(){
$('#'+target[id]).append($('<option>').val($(this).get(0).value).text($(this).get(0).text));
});
}
});
});
</script>
<select id="a">
<option value="">---</option>
<option value="buki">武器</option>
<option value="bougu">防具</option>
</select>
<select id="b">
<option value="">---</option>
</select>
<select id="c">
<option value="">---</option>
</select>

[EurekaSeven]

返信が遅れました！！

このコードを見ながら手書きしていくと感覚がつかめました。
optionタグに自動生成されるロジックがわからなくて苦労していましたが解決しました。
ありがとうございます

Answer 2

「jqueryで選択すると次のコンテンツが変わるセレクトボックス」でググったところ、そのままのタイトルのページが見つかったのでびっくりしました。

jQueryで選択すると次のコンテンツが変わるセレクトボックスを作ってみよう | サイドスリーブログ | 神戸のWeb制作会社 株式会社サイドスリー

ご参考になれば幸いです。
あと、質問の前にググりましょう。

Comments

[EurekaSeven]

ありがとうございます

ググってそのサイトを見た上でわからなかったです

[Lhankor_Mhy]

そうなんですね。
どのあたりがわからなかったですか？
上手くいかなかったコードは提示できますか？