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

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

ただいまの
回答率

91.86%

  • JavaScript

    8749questions

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

複数のselectboxの結果を返したい

受付中

回答 2

投稿 2015/11/01 00:03 ・編集 2015/11/01 00:37

  • 評価
  • クリップ 0
  • VIEW 554
退会済みユーザー

退会済みユーザー

こんばんは。
初心者で恐縮な質問なんですが、selectboxに関してです。

前提・実現したいこと

4つのselectboxの値を計算して結果をボタンを押して表示させる。
保険資産の数十パターンの見積もりのために作ってるのですが、詰まってしまいました。
下記は途中まで書いたコードです。

ソースコード

    function goShisan() {

var tanka = [
    [6.5 , 10.6],
    [6.5 , 13],
    [8.4 , 16.5],
    [11.8 , 24.4],
    [11.8 , 27.9],
    [13.6 , 24.4],
    [20.2 , 32.6]
];

var mySelectname1 = document.shisanForm.where.selectedIndex;
var whereNAME = document.shisanForm.where.options[mySelectname1].text;

var mySelectname2 = document.shisanForm.kouzou.selectedIndex;
var kouzouNAME = document.shisanForm.kouzou.options[mySelectname2].text;
var mySelect1 = document.shisanForm.where.selectedIndex;
var whereID = parseInt(document.shisanForm.where.options[mySelect1].value);
var mySelect2 = document.shisanForm.kouzou.selectedIndex;
var kouzouID = parseInt(document.shisanForm.kouzou.options[mySelect2].value);

var tankaKKK = tanka[ whereID - 1 ][ kouzouID - 1];

var mySelect3 = document.shisanForm.tatemono.selectedIndex;
var tatemonoKKK = parseInt(document.shisanForm.tatemono.options[mySelect3].value);
var mySelect4 = document.shisanForm.kazai.selectedIndex;
var kazaiKKK = parseInt(document.shisanForm.kazai.options[mySelect4].value);


document.getElementById('tatemonoKKKoutput').innerHTML = tatemonoKKK.toLocaleString();
document.getElementById('kazaiKKKoutput').innerHTML = kazaiKKK;


var tatemonoKKKTTL = parseInt(tatemonoKKK * tankaKKK);
tatemonoKKKTTL = tatemonoKKKTTL / 10;
tatemonoKKKTTL = Math.round(tatemonoKKKTTL) * 10;
var kazaiKKKTTL = parseInt(kazaiKKK * tankaKKK);
kazaiKKKTTL = kazaiKKKTTL / 10;
kazaiKKKTTL = Math.round(kazaiKKKTTL) * 10;
var allTTL = tatemonoKKKTTL + kazaiKKKTTL;


document.getElementById('whereoutput').innerHTML = whereNAME;
document.getElementById('kouzououtput').innerHTML = kouzouNAME;
document.getElementById('idoutput').innerHTML = "" + whereID + "" + kouzouID;
document.getElementById('tatemonooutput').innerHTML = tatemonoKKKTTL.toLocaleString();
document.getElementById('kazaioutput').innerHTML = kazaiKKKTTL.toLocaleString();
document.getElementById('alloutput').innerHTML = allTTL.toLocaleString();

    }
<div style="margin-top: 20px;">
<form name="shisanForm" style="font-size: 14px; font-weight: bold;">
<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px;">建物の所在地:
<select name="where" onChange="goShisan()">
<option value="3">北海道</option>
<option value="3">青森県</option>
<option value="1">岩手県</option>
<option value="3">宮城県</option>
<option value="1">秋田県</option>
<option value="1">山形県</option>
<option value="2">福島県</option>
<option value="4">茨城県</option>
<option value="1">栃木県</option>
<option value="1">群馬県</option>
<option value="6">埼玉県</option>
<option value="7">千葉県</option>
<option value="7">東京都</option>
<option value="7">神奈川県</option>
<option value="3">新潟県</option>
<option value="1">富山県</option>
<option value="1">石川県</option>
<option value="1">福井県</option>
<option value="3">山梨県</option>
<option value="1">長野県</option>
<option value="3">岐阜県</option>
<option value="7">静岡県</option>
<option value="7">愛知県</option>
<option value="7">三重県</option>
<option value="1">滋賀県</option>
<option value="3">京都府</option>
<option value="6">大阪府</option>
<option value="3">兵庫県</option>
<option value="3">奈良県</option>
<option value="7">和歌山県</option>
<option value="1">鳥取県</option>
<option value="1">島根県</option>
<option value="1">岡山県</option>
<option value="1">広島県</option>
<option value="1">山口県</option>
<option value="5">徳島県</option>
<option value="3">香川県</option>
<option value="4">愛媛県</option>
<option value="5">高知県</option>
<option value="1">福岡県</option>
<option value="1">佐賀県</option>
<option value="1">長崎県</option>
<option value="1">熊本県</option>
<option value="3">大分県</option>
<option value="3">宮崎県</option>
<option value="1">鹿児島県</option>
<option value="3">沖縄県</option>
</select>
</div>

<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物の構造種別:
<select name="kouzou" onChange="goShisan()">
<option value="1">M</option>
<option value="1">T</option>
<option value="2">H</option>
</select>
</div>

<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物保険金額:
<select name="tatemono" onChange="goShisan()">
<option value="500">1,000万円</option>
<option value="750">1,500万円</option>
<option value="1000">2,000万円</option>
<option value="1500">3,000万円</option>
</select>
</div>

<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">家財保険金額:
<select name="kazai" onChange="goShisan()">
<option value="0">補償なし</option>
<option value="150">300万円</option>
<option value="250">500万円</option>
</select>
</div>


</div>

<br style="clear: both;">

<div style="padding-top: 20px; margin-top: 20px; border-top: #ccc 1px solid;">
    <div style="padding: 10px; background-color: #ffc; font-size: 14px; color: #900; font-weight: bold;"><span id="whereoutput">北海道</span>、<span id="kouzououtput">M構造</span>の建物の地震保険料<span style="font-weight: normal; size: 12px;">(ID:<span id="idoutput">31</span>)</span></div>
    <div style="width: 350px; border: #ccc 1px solid; float: left; margin-top: 20px;">
        <div style="background-color: #ccc; font-weight: bold; padding: 10px;">補償内容</div>
        <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物の補償額:最大&nbsp;<span id="tatemonoKKKoutput" style="font-size: 18px; font-weight: bold;">500</span>&nbsp;万円</div>
        <div style="margin: 10px;">家財の補償額:最大&nbsp;<span id="kazaiKKKoutput" style="font-size: 18px; font-weight: bold;">0</span>&nbsp;万円</div>
    </div>
    <div style="width: 350px; border: #ccc 1px solid; float: left; margin: 20px 0 0 20px;">
        <div style="background-color: #ccc; font-weight: bold; padding: 10px;">保険料</div>
        <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物地震保険料: <span id="tatemonooutput" style="font-size: 18px; color: #d00; font-weight: bold;">4,200</span>&nbsp;円</div>
        <div style="margin: 10px; border-bottom: #bbb 1px solid; padding-bottom: 10px;">家財地震保険料: <span id="kazaioutput" style="font-size: 18px; color: #d00; font-weight: bold;">0</span>&nbsp;円</div>
        <div style="margin: 10px;"><span style="font-size: 20px; font-weight: bold;">地震保険料: <span id="alloutput" style="color: #d00; font-size: 26px;">4,200</span>&nbsp;円</span></div>
    </div>

</div>

###アドバイス等いただけたら幸いです。よろしくお願いいたします。
  • 気になる質問をクリップする

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

    クリップした質問はマイページの「クリップ」タブからいつでも見ることができます。

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • Kosuke_Shibuya

    2015/11/01 00:17

    お手数ですが、どこまであっているかわからないコードを見ても「どう計算するのが正解なのか」わかりません。計算の方法を提示してください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2015/11/01 00:40

    計算の方法はこれで合っています。不足部分は、 ー何回も同じことを書いてるので、何かjqueryでいい書き方はないか。 ーボタンを押して結果を表示させたい。 この二点です。

    キャンセル

  • Kosuke_Shibuya

    2015/11/01 00:47 編集

    申し訳ないが、適切なインデントもされていないようなソースコードを読んでまでの回答は作業量が多すぎてボランティアでやるつもりはありません。 (所在地)x (???)= (保険料) のように記述してください。

    キャンセル

回答 2

0

具体的にどう表示したくてどのような問題が発生しているのでしょうか。
テンプレートを使うなら「発生している問題・エラーメッセージ」も書くと良いと思います。
目に付く改善案は次のようなところでしょうか。

 - <option value="3"> のように value 属性値の重複が多数見られるのでユニークに(value属性は省略したら内容が値となる)
 - selectedIndex を使わなくても select.value で参照可能
 - 全てのselect要素で同じ goShisan() を呼び出しているが、その度に全てのselect要素を処理にかけるのは無駄なので変更のあった要素だけ処理する

<script>
'use strict';
function handleChange (event) {
  var select = event.target || event.srcElement;

  select.ownerDocument.getElementById('output-' + select.name).firstChild.data = select.value;
}
</script>
<form id="sample">
  <label>
    所在地
    <select name="where" onChange="handleChange(event);">
      <option>北海道</option>
      <option>青森県</option>
      <option>岩手県</option>
      <option>宮城県</option>
      <option>秋田県</option>
      <option>山形県</option>
      <option>福島県</option>
      <option>茨城県</option>
      <option>栃木県</option>
      <option>群馬県</option>
      <option>埼玉県</option>
      <option>千葉県</option>
      <option>東京都</option>
      <option>神奈川県</option>
      <option>新潟県</option>
      <option>富山県</option>
      <option>石川県</option>
      <option>福井県</option>
      <option>山梨県</option>
      <option>長野県</option>
      <option>岐阜県</option>
      <option>静岡県</option>
      <option>愛知県</option>
      <option>三重県</option>
      <option>滋賀県</option>
      <option>京都府</option>
      <option>大阪府</option>
      <option>兵庫県</option>
      <option>奈良県</option>
      <option>和歌山県</option>
      <option>鳥取県</option>
      <option>島根県</option>
      <option>岡山県</option>
      <option>広島県</option>
      <option>山口県</option>
      <option>徳島県</option>
      <option>香川県</option>
      <option>愛媛県</option>
      <option>高知県</option>
      <option>福岡県</option>
      <option>佐賀県</option>
      <option>長崎県</option>
      <option>熊本県</option>
      <option>大分県</option>
      <option>宮崎県</option>
      <option>鹿児島県</option>
      <option>沖縄県</option>
    </select>
  </label>
  <label>
    構造
    <select name="kouzou" onChange="handleChange(event);">
      <option>M構造</option>
      <option>T構造</option>
      <option>H構造</option>
    </select>
  </label>
</form>

<p>所在地: <span id="output-where">北海道</span></p>
<p>構造: <span id="output-kouzou">M構造</span></p>

投稿 2015/11/01 01:10

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

  • 2015/11/01 02:45

    ><option value="3"> のように value 属性値の重複が多数見られるのでユニークに(value属性は省略したら内容が値となる)
    これ、地震保険の等級か重みでしょう。なので、かなり重複するけど数値には意味がありそうです。

    キャンセル

  • 2015/11/01 09:04

    別の意味がある可能性も考えましたが、だとしても option[value] の値がふさわしくないと考えます。
    例えば、[北海道] を選択して form を送信する場合、where === 1 となりますが、送信されるのは「地震保険の等級」であって「所在地」ではないですよね?
    「ラベル(所在地)」と「実質的な値(等級)」に相違があります。
    「所在地」と「等級」に関連性を持たせるのなら、
    - option要素では「所在地」の値を参照し、JavaScript で「所在地」と「等級」の対応関係を表すマップオブジェクトを用意し、「等級」に変換する
    - <option data-rank="1">北海道</option> のように data-* 独自属性に「等級」の情報を埋め込む
    のような実装であるべきだと考えます。
    # 最も、私が回答を書いている間に質問者は退会してしまったので既に回答する意欲が失せているのですが…。

    キャンセル

0

<script>
function goShisan() {
    // form 取得
    var shisanForm = document.forms["shisanForm"];

    // 各リスト選択肢とその値を取得
    var selWhere = getSelectedValueAndText(shisanForm.where);
    var selKouzou = getSelectedValueAndText(shisanForm.kouzou);
    var selTatemono = getSelectedValueAndText(shisanForm.tatemono);
    var selKazai = getSelectedValueAndText(shisanForm.kazai);
    
    // カンマの位置を変更しました;;
    var tanka = [
        [6.5 , 10.6]
        , [6.5 , 13]
        , [8.4 , 16.5]
        , [11.8 , 24.4]
        , [11.8 , 27.9]
        , [13.6 , 24.4]
        , [20.2 , 32.6]
    ];
    // 計算(10円未満四捨五入して切り捨て)
    var tankaKKK = tanka[selWhere.value - 1][selKouzou.value - 1];
    var tatemonoKKKTTL = Math.round((selTatemono.value * tankaKKK) / 10) * 10;
    var kazaiKKKTTL = Math.round((selKazai.value * tankaKKK) / 10) * 10;
    var allTTL = tatemonoKKKTTL + kazaiKKKTTL;
    
    // 結果表示
    kekkaOutput("tatemonoKKKoutput", selTatemono.value.toLocaleString());
    kekkaOutput("kazaiKKKoutput", selKazai.value);
    kekkaOutput("whereoutput", selWhere.text);
    kekkaOutput("kouzououtput", selKouzou.text);
    kekkaOutput("idoutput", selWhere.text + " " + selKouzou.text);
    kekkaOutput("tatemonooutput", tatemonoKKKTTL.toLocaleString());
    kekkaOutput("kazaioutput", kazaiKKKTTL.toLocaleString());
    kekkaOutput("alloutput", allTTL.toLocaleString());

    // リストの選択表示名と値を取得する
    function getSelectedValueAndText(oSel) {
        var index = oSel.selectedIndex;

        // ☆- 0 ってやると、文字列 をお手軽に数値に変換できる(parseInt()と同じ)
        return { value: oSel.options[index].value - 0, text: oSel.options[index].text };
        
        // 受け側で、ans = getSelectedValueAndText(shisanForm.where); ってやったとき、
        // ans.value と ans.text で変数にアクセスできる
    }
    
    // 結果出力用メソッドを用意する(同じような記述の反復を避けるため)
    function kekkaOutput(outputId, kekka) {
        var item = document.getElementById(outputId);
        item.innerHTML = kekka;
    }
    
}
</script>
<meta charset="utf-8" />
<div style="margin-top: 20px;">
<form name="shisanForm" style="font-size: 14px; font-weight: bold;">
<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px;">建物の所在地:
<select name="where" >
<option value="3">北海道</option>
<option value="3">青森県</option>
<option value="1">岩手県</option>
<option value="3">宮城県</option>
<option value="1">秋田県</option>
<option value="1">山形県</option>
<option value="2">福島県</option>
<option value="4">茨城県</option>
<option value="1">栃木県</option>
<option value="1">群馬県</option>
<option value="6">埼玉県</option>
<option value="7">千葉県</option>
<option value="7">東京都</option>
<option value="7">神奈川県</option>
<option value="3">新潟県</option>
<option value="1">富山県</option>
<option value="1">石川県</option>
<option value="1">福井県</option>
<option value="3">山梨県</option>
<option value="1">長野県</option>
<option value="3">岐阜県</option>
<option value="7">静岡県</option>
<option value="7">愛知県</option>
<option value="7">三重県</option>
<option value="1">滋賀県</option>
<option value="3">京都府</option>
<option value="6">大阪府</option>
<option value="3">兵庫県</option>
<option value="3">奈良県</option>
<option value="7">和歌山県</option>
<option value="1">鳥取県</option>
<option value="1">島根県</option>
<option value="1">岡山県</option>
<option value="1">広島県</option>
<option value="1">山口県</option>
<option value="5">徳島県</option>
<option value="3">香川県</option>
<option value="4">愛媛県</option>
<option value="5">高知県</option>
<option value="1">福岡県</option>
<option value="1">佐賀県</option>
<option value="1">長崎県</option>
<option value="1">熊本県</option>
<option value="3">大分県</option>
<option value="3">宮崎県</option>
<option value="1">鹿児島県</option>
<option value="3">沖縄県</option>
</select>
<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物の構造種別:
    <select name="kouzou">
        <option value="1">M</option>
        <option value="1">T</option>
        <option value="2">H</option>
    </select>
</div>

<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物保険金額:
    <select name="tatemono">
        <option value="500">1,000万円</option>
        <option value="750">1,500万円</option>
        <option value="1000">2,000万円</option>
        <option value="1500">3,000万円</option>
    </select>
</div>

</div>
<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">家財保険金額:
    <select name="kazai">
        <option value="0">補償なし</option>
        <option value="150">300万円</option>
        <option value="250">500万円</option>
    </select>
</div>


</div>

<br style="clear: both;">

<div style="padding-top: 20px; margin-top: 20px; border-top: #ccc 1px solid;">
    <div style="padding: 10px; background-color: #ffc; font-size: 14px; color: #900; font-weight: bold;"><span id="whereoutput">北海道</span>、<span id="kouzououtput">M構造</span>の建物の地震保険料<span style="font-weight: normal; size: 12px;">(ID:<span id="idoutput">31</span>)</span></div>
    <div style="width: 350px; border: #ccc 1px solid; float: left; margin-top: 20px;">
        <div style="background-color: #ccc; font-weight: bold; padding: 10px;">補償内容</div>
        <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物の補償額:最大&nbsp;<span id="tatemonoKKKoutput" style="font-size: 18px; font-weight: bold;">500</span>&nbsp;万円</div>
        <div style="margin: 10px;">家財の補償額:最大&nbsp;<span id="kazaiKKKoutput" style="font-size: 18px; font-weight: bold;">0</span>&nbsp;万円</div>
    </div>
    <div style="width: 350px; border: #ccc 1px solid; float: left; margin: 20px 0 0 20px;">
        <div style="background-color: #ccc; font-weight: bold; padding: 10px;">保険料</div>
        <div style="margin: 10px; border-bottom: #ddd 1px dashed; padding-bottom: 10px;">建物地震保険料: <span id="tatemonooutput" style="font-size: 18px; color: #d00; font-weight: bold;">4,200</span>&nbsp;円</div>
        <div style="margin: 10px; border-bottom: #bbb 1px solid; padding-bottom: 10px;">家財地震保険料: <span id="kazaioutput" style="font-size: 18px; color: #d00; font-weight: bold;">0</span>&nbsp;円</div>
        <div style="margin: 10px;"><span style="font-size: 20px; font-weight: bold;">地震保険料: <span id="alloutput" style="color: #d00; font-size: 26px;">4,200</span>&nbsp;円</span></div>
    </div>

</div>

<br style="clear: both;">
<div style="width: 100%; text-align: right; ">
    <button name="command" value="sisanMitumori" onclick="goShisan(); return false;">お見積もり</button>
</div>

goShisan() を「お見積もり」ボタン押下で動作するように変更しました。

投稿 2015/11/01 02:44

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

    以下のような回答は評価を下げられます

    • 間違っている回答
    • 質問の回答になっていない投稿
    • 不快な投稿

    評価を下げる際はその理由をコメントに書き込んでください。

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

ただいまの回答率

91.86%

関連した質問

  • 解決済

    html、文字サイズを改行せずに変更、センタリング

    すごく初歩的かもしれませんが質問させていただきます。 ページ内で価格を表記する際に、(税込)の部分のみフォントのサイズを小さくしたいです。 WordPressで扱っているので、CS

  • 解決済

    文字を細くするタグの編集がうまくできません

    「式場名」となっている場所を隣にある「料金」と同じくらいの太さにしようと試みようとしました。 フォントタグなどを使ったり色々な方法を試しましたが解決には至りませんでした。

  • 解決済

    webブラウザでled点灯用のリモコン作成

    前提・実現したいこと raspberry pi をwebブラウザから操作する用にブラウザ作成をしています。CSSでボタンを作成し、カスタマイズをしているのですが変更されません。

  • 解決済

    Qiita のようなタグの付け方を実装したいです。

    Qiitaのタグを入力する画面では、teratail のようなものではなく、半角スペースをつけるまでが一区切りで、つけると新たなタグになる仕組みです。 一区切りの部分は青

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

  • JavaScript

    8749questions

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

閲覧数の多いJavaScriptの質問