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

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

ただいまの
回答率

90.51%

  • JavaScript

    20332questions

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

javascriptで三段階の絞り込み検索をやりたい。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 537

sembokulove

score 2

自分はプルダウンのjavascriptで絞り込み検索というものをやっております。2段階の絞り込み検索には成功しましたが、3段階の絞り込み検索はどうやればできるのでしょうか。たとえば食べ物を選択すると果物か野菜か肉類が出て、果物を選択するとリンゴやミカンやイチゴが出てくるモノを作りたいです。
以下はソースです。
<script type = "text/javascript">
<!--
function functionName()
{
var select1 = document.forms.formName.selectName1; //変数select1を宣言
var select2 = document.forms.formName.selectName2; //変数select2を宣言

select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要

if (select1.options[select1.selectedIndex].value == "大阪府")
{
select2.options[0] = new Option("堺市堺区");
select2.options[1] = new Option("堺市中区");
select2.options[2] = new Option("堺市東区");
select2.options[3] = new Option("堺市西区");
select2.options[4] = new Option("堺市南区");
select2.options[5] = new Option("堺市北区")
select2.options[6] = new Option("堺市美原区");
select2.options[7] = new Option("和泉市");
}

else if (select1.options[select1.selectedIndex].value == "兵庫県")
{
select2.options[0] = new Option("神戸市東灘区");
select2.options[1] = new Option("神戸市灘区");
select2.options[2] = new Option("堺市中央区");
select2.options[3] = new Option("神戸市兵庫区");
select2.options[4] = new Option("神戸市長田区");
select2.options[5] = new Option("神戸市須磨区");
select2.options[6] = new Option("神戸市市垂水区");
select2.options[7] = new Option("神戸市北区");
select2.options[8] = new Option("神戸市市西区");
select2.options[9] = new Option("尼崎市");
select2.options[10] = new Option("西宮市");
select2.options[11] = new Option("芦屋市");
select2.options[12] = new Option("伊丹市");
select2.options[13] = new Option("川西市");
select2.options[14] = new Option("宝塚市");
select2.options[15] = new Option("猪名川町");
select2.options[16] = new Option("三田市");
}
else if (select1.options[select1.selectedIndex].value == "奈良県")
{
select2.options[0] = new Option("奈良市");
select2.options[1] = new Option("生駒市");
select2.options[2] = new Option("平群町");
select2.options[3] = new Option("三郷町");
select2.options[4] = new Option("王寺町");
select2.options[5] = new Option("神戸市須磨区");
select2.options[6] = new Option("神戸市市垂水区");
select2.options[7] = new Option("神戸市北区");
select2.options[8] = new Option("神戸市市西区");
select2.options[9] = new Option("尼崎市");
select2.options[10] = new Option("西宮市");
select2.options[11] = new Option("芦屋市");
select2.options[12] = new Option("伊丹市");
select2.options[13] = new Option("川西市");
select2.options[14] = new Option("宝塚市");
select2.options[15] = new Option("猪名川町");
select2.options[16] = new Option("三田市");
}
else if (select1.options[select1.selectedIndex].value == "京都府")
{
select2.options[0] = new Option("京都市下京区");
select2.options[1] = new Option("京都市中京区");
select2.options[2] = new Option("京都市上京区");
select2.options[3] = new Option("京都市右京区");
select2.options[4] = new Option("京都市西京区");
select2.options[5] = new Option("京都市東山区");
select2.options[6] = new Option("京都市左京区");
select2.options[7] = new Option("京都市山科区");
select2.options[8] = new Option("京都市南区");
select2.options[9] = new Option("京都市伏見区");
select2.options[10] = new Option("宇治市");
select2.options[11] = new Option("亀岡市");
select2.options[12] = new Option("南丹市");
select2.options[13] = new Option("船井郡京丹波町");
select2.options[14] = new Option("福知山市");
select2.options[15] = new Option("綾部市");
select2.options[16] = new Option("舞鶴市");
select2.options[17] = new Option("宮津市");
}

else if (select1.options[select1.selectedIndex].value == "肉類")
{
select2.options[0] = new Option("豚肉");
select2.options[1] = new Option("牛肉");
}

//-->
</script>

<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">
<!--選択肢その1-->
<select name = "selectName1" onChange="functionName()">
<option value = "選択されていません">選択されていません</option>
<option value = "大阪府">大阪府</option>
<option value = "兵庫県">兵庫県</option>
<option value = "奈良県">奈良県</option>
<option value = "京都府">京都府</option>
<option value = "肉類">にくるい</option>
</select>

<!--選択肢その2(選択肢その1の項目によって変化)-->
<select name = "selectName2">
</select>

</body>

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    2019/01/12 15:16

    二段ができて三段ができない理由がわからないですね。
    そろそろマークダウンでコード提示いただけませんか?でないと正しく再現確認できないんですよね。
    質問読む気を削ぐコードの提示の仕方です。
    まともな回答要らないてなら別にこのままでもいいですけど、ほとんどの質問未解決のまま進まれるのは荒らし行為と同等です。やめてください。

    キャンセル

  • 退会済みユーザー

    2019/01/15 00:21

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • キャンセル

  • キャンセル

回答 1

+4

長いので省略して大阪府だけ3段階目まで選べるようにしました。

<script type = "text/javascript">
function functionName() {
    var select1 = document.forms.formName.selectName1; //変数select1を宣言
    var select2 = document.forms.formName.selectName2; //変数select2を宣言
    var select3 = document.forms.formName.selectName3; //変数select3を宣言

    select3.options.length = 0;

    if (select2.selectedIndex < 0) {
        select2.options.length = 0;
        if (select1.options[select1.selectedIndex].value == "大阪府")
        {
            select2.options[0] = new Option("堺市堺区");
            select2.options[1] = new Option("堺市中区");
        }

        else if (select1.options[select1.selectedIndex].value == "兵庫県")
        {
            select2.options[0] = new Option("神戸市東灘区");
            select2.options[1] = new Option("神戸市灘区");
            select2.options[2] = new Option("堺市中央区");
        }
        else if (select1.options[select1.selectedIndex].value == "奈良県")
        {
            select2.options[0] = new Option("奈良市");
            select2.options[1] = new Option("生駒市");
        }
        else if (select1.options[select1.selectedIndex].value == "京都府")
        {
            select2.options[0] = new Option("下京区");
            select2.options[1] = new Option("中京区");
            select2.options[2] = new Option("上京区");
        }
        else if (select1.options[select1.selectedIndex].value == "肉類")
        {
            select2.options[0] = new Option("豚肉");
            select2.options[1] = new Option("牛肉");
        }
    } else {

        if (select2.options[select2.selectedIndex].value == "堺市堺区")
        {
            select3.options[0] = new Option("堺市堺区A");
            select3.options[1] = new Option("堺市堺区B");
        } else if (select2.options[select2.selectedIndex].value == "堺市中区")
        {
            select3.options[0] = new Option("堺市中区A");
            select3.options[1] = new Option("堺市中区B");
        }
    }
} 
</script>

<body bgcolor onLoad="functionName()">
    <form name="formName" method="post" action="./pathToProgramFile">
        <!--選択肢その1-->
        <select name = "selectName1" onChange="functionName()">
            <option value = "選択されていません">選択されていません</option>
            <option value = "大阪府">大阪府</option>
            <option value = "兵庫県">兵庫県</option>
            <option value = "奈良県">奈良県</option>
            <option value = "京都府">京都府</option>
            <option value = "肉類">にくるい</option>
        </select>

        <!--選択肢その2(選択肢その1の項目によって変化)-->
        <select name = "selectName2" onChange="functionName()">
        </select>
        <select name = "selectName3" >
        </select>
    </form>
</body>

大分質問文も良くなったと思いますが、mts10806さんやほかの質問でも指摘されている通りコードは「```」でくくって、上記のように見やすくしないと回答が来づらいです。
コードを載せられたのも素晴らしいですが、これではまだ「3段階目の検索機能を作ってくれ」という丸投げの依頼にしか見ません。「3段階目を作るためにこういうコードを書いたけど、こういうエラーが出て動かなかった。どうすればいいですか」となって初めて質問になってるといえると思います。

私の記載したコードはsembokuloveさんの書かれたコードの多くの課題が残ったままになっていると思います。
4段階目はどうするのか、冗長な箇所が無いか、選択肢の追加や更新が大変じゃないか、などなど
質問文からはこれ以上の仕様は読み取れず私の力では解決できなかったため、ここからの改良はsembokuloveさんが頑張っていただければと思います。

また、未解決のままほったらかしにしてる質問も解決したのであれば自己解決方法を記入し、同じ質問を繰り返してしまったのであれば削除依頼をだすなりしたほうがいいと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

  • JavaScript

    20332questions

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