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

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

ただいまの
回答率

90.52%

  • PHP

    23487questions

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

  • JavaScript

    19815questions

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

  • jQuery

    7959questions

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

jquery プルダウンで見積もり表

解決済

回答 1

投稿

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

sssshin

score 19

javascriptにて料金見積もり表を作成しています。
プルダウン1つ目、それを選択したら2つ目の内容が1つ目の内容に応じて内容が変わる。
それは下記のやり方でできたのですが、それにあと1つ項目を増やしたいのですがそれができません。

1つ目選択、それに応じた2つ目選択。今は1つ目+2つ目の合計が出る。
新しく作った3つ目は独立してて、それは選択したら現在の1+2に追加で+3の合計にしたい。

追加したい3つ目というのは、
距離
25キロ 0
26キロ 300円
27キロ 600円
というようなものです。
どうしたら良いでしょうか?

<script type="text/javascript"><!--
msgtxt = new Array();
for (i=0; i<9; i++){
msgtxt[i] = new Array();
}

msgtxt[0][0]="選択してください";
msgtxt[0][1]="選択してください";
msgtxt[0][2]="選択してください";
msgtxt[0][3]="選択してください";
msgtxt[1][0]="選択してください";
msgtxt[1][1]="平日3時間(12M) 14,900円";
msgtxt[1][2]="平日3時間(19.5M) 19,900円";
msgtxt[1][3]="選択できません";
msgtxt[2][0]="選択してください";

//[8][3]まで繰り返し。省略。



function selchg(){
sltd=document.f1.s1.selectedIndex;
if (sltd=="0"){
document.f1.s2.options[1].text="選択してください";
document.f1.s2.options[2].text="選択してください";
document.f1.s2.options[3].text="選択してください";
 document.f1.s2.options[0].text="選択してください";
}
else if (sltd=="1"){
document.f1.s2.options[0].text="選択してください";
document.f1.s2.options[1].text="12M料金 (税別)";
document.f1.s2.options[2].text="19.5M料金 (税別)";
document.f1.s2.options[3].text="-";

}
else if (sltd=="2"){
document.f1.s2.options[0].text="選択してください";
document.f1.s2.options[1].text="12M料金 (税別)";
document.f1.s2.options[2].text="19.5M料金 (税別)";
document.f1.s2.options[3].text="-";
}

//else if (sltd=="8"){ まで繰り返し 省略。
}

function txtchg(){
x=document.f1.s1.selectedIndex;
y=document.f1.s2.selectedIndex;
document.f1.t1.value=msgtxt[x][y];
}
//--></script>
<form name="f2">
<h2>レンタル表</h2>
<select class="plicespan" name="s1" onchange="selchg2()">
<option>選択してください</option>
<option>平日料金3時間</option>
<option>平日料金6時間</option>
<option>平日料金8時間(9時~17時)</option>
<option>延長料金(9時~18時内)</option>
<option>早朝・夜間・日・祝日3時間</option>
<option>早朝・夜間・日・祝日6時間</option>
<option>早朝・夜間・日・祝日8時間</option>
<option>延長料金(日・祝日・早朝・夜間)</option>
<option>道路使用許可申請代行</option>
</select>

・長さ   <select class="plicespan" name="s2" onchange="txtchg2()">
<option>選択してください</option>
<option>-</option>
<option>-</option>
<option>-</option>
</select><span style="color: #ff0000;">合計金額</span> <textarea class="area" name="t2"></textarea>

</form>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

こんな感じでしょうか?

<!DOCTYPE html>
<html lang="ja">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        $(function(){
            selection2 = [
                [
                    { text: "-", value: 0 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "平日3時間(12M) 14,900円", value: 14900 },
                    { text: "平日3時間(19.5M) 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ],[
                    { text: "選択してください", value: 0 },
                    { text: "12M 14,900円", value: 14900 },
                    { text: "19.5M 19,900円", value: 19900 }
                ]
            ];
            $("#s1").change(function() {
                $("#s2 option").remove();
                $("#t2").text("");
                selection2[$("#s1 option:selected").val()].forEach(function(value) {
                    $option = $('<option>').val(value.value).text(value.text);
                    $("#s2").append($option);
                });
            });
            $("#s2, #s3").change(function() {
                if ($("#s2").children().length > 1) {
                    $("#t2").text(parseInt($("#s2 option:selected").val()) + parseInt($("#s3 option:selected").val()));
                }
            });
        });
    </script>
</head>

<body>
    <form name="f2">
        <h2>レンタル表</h2>

        <select class="plicespan" name="s1" id="s1">
            <option value="0">選択してください</option>
            <option value="1">平日料金3時間</option>
            <option value="2">平日料金6時間</option>
            <option value="3">平日料金8時間(9時~17時)</option>
            <option value="4">延長料金(9時~18時内)</option>
            <option value="5">早朝・夜間・日・祝日3時間</option>
            <option value="6">早朝・夜間・日・祝日6時間</option>
            <option value="7">早朝・夜間・日・祝日8時間</option>
            <option value="8">延長料金(日・祝日・早朝・夜間)</option>
            <option value="9">道路使用許可申請代行</option>
        </select>

        ・長さ
        <select class="plicespan" name="s2" id="s2">
            <option>-</option>
        </select>

        ・距離
        <select class="plicespan" name="s3" id="s3">
            <option value="0">25キロ0円</option>
            <option value="300">26キロ300円</option>
            <option value="600">27キロ600円</option>
        </select><span style="color: #ff0000;">合計金額</span> <textarea class="area" name="t2" id="t2"></textarea>

    </form>
</body>

</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/02/26 18:39

    ありがとうございます!なりました!

    キャンセル

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

  • PHP

    23487questions

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

  • JavaScript

    19815questions

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

  • jQuery

    7959questions

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