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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

Q&A

2回答

3256閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2015/10/31 15:03

編集2022/01/12 10:55

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

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

###ソースコード

javascript

1 function goShisan() { 2 3var tanka = [ 4 [6.5 , 10.6], 5 [6.5 , 13], 6 [8.4 , 16.5], 7 [11.8 , 24.4], 8 [11.8 , 27.9], 9 [13.6 , 24.4], 10 [20.2 , 32.6] 11]; 12 13var mySelectname1 = document.shisanForm.where.selectedIndex; 14var whereNAME = document.shisanForm.where.options[mySelectname1].text; 15 16var mySelectname2 = document.shisanForm.kouzou.selectedIndex; 17var kouzouNAME = document.shisanForm.kouzou.options[mySelectname2].text; 18var mySelect1 = document.shisanForm.where.selectedIndex; 19var whereID = parseInt(document.shisanForm.where.options[mySelect1].value); 20var mySelect2 = document.shisanForm.kouzou.selectedIndex; 21var kouzouID = parseInt(document.shisanForm.kouzou.options[mySelect2].value); 22 23var tankaKKK = tanka[ whereID - 1 ][ kouzouID - 1]; 24 25var mySelect3 = document.shisanForm.tatemono.selectedIndex; 26var tatemonoKKK = parseInt(document.shisanForm.tatemono.options[mySelect3].value); 27var mySelect4 = document.shisanForm.kazai.selectedIndex; 28var kazaiKKK = parseInt(document.shisanForm.kazai.options[mySelect4].value); 29 30 31document.getElementById('tatemonoKKKoutput').innerHTML = tatemonoKKK.toLocaleString(); 32document.getElementById('kazaiKKKoutput').innerHTML = kazaiKKK; 33 34 35var tatemonoKKKTTL = parseInt(tatemonoKKK * tankaKKK); 36tatemonoKKKTTL = tatemonoKKKTTL / 10; 37tatemonoKKKTTL = Math.round(tatemonoKKKTTL) * 10; 38var kazaiKKKTTL = parseInt(kazaiKKK * tankaKKK); 39kazaiKKKTTL = kazaiKKKTTL / 10; 40kazaiKKKTTL = Math.round(kazaiKKKTTL) * 10; 41var allTTL = tatemonoKKKTTL + kazaiKKKTTL; 42 43 44document.getElementById('whereoutput').innerHTML = whereNAME; 45document.getElementById('kouzououtput').innerHTML = kouzouNAME; 46document.getElementById('idoutput').innerHTML = "" + whereID + "" + kouzouID; 47document.getElementById('tatemonooutput').innerHTML = tatemonoKKKTTL.toLocaleString(); 48document.getElementById('kazaioutput').innerHTML = kazaiKKKTTL.toLocaleString(); 49document.getElementById('alloutput').innerHTML = allTTL.toLocaleString(); 50 51 } 52 53

HTML

1<div style="margin-top: 20px;"> 2<form name="shisanForm" style="font-size: 14px; font-weight: bold;"> 3<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px;">建物の所在地: 4<select name="where" onChange="goShisan()"> 5<option value="3">北海道</option> 6<option value="3">青森県</option> 7<option value="1">岩手県</option> 8<option value="3">宮城県</option> 9<option value="1">秋田県</option> 10<option value="1">山形県</option> 11<option value="2">福島県</option> 12<option value="4">茨城県</option> 13<option value="1">栃木県</option> 14<option value="1">群馬県</option> 15<option value="6">埼玉県</option> 16<option value="7">千葉県</option> 17<option value="7">東京都</option> 18<option value="7">神奈川県</option> 19<option value="3">新潟県</option> 20<option value="1">富山県</option> 21<option value="1">石川県</option> 22<option value="1">福井県</option> 23<option value="3">山梨県</option> 24<option value="1">長野県</option> 25<option value="3">岐阜県</option> 26<option value="7">静岡県</option> 27<option value="7">愛知県</option> 28<option value="7">三重県</option> 29<option value="1">滋賀県</option> 30<option value="3">京都府</option> 31<option value="6">大阪府</option> 32<option value="3">兵庫県</option> 33<option value="3">奈良県</option> 34<option value="7">和歌山県</option> 35<option value="1">鳥取県</option> 36<option value="1">島根県</option> 37<option value="1">岡山県</option> 38<option value="1">広島県</option> 39<option value="1">山口県</option> 40<option value="5">徳島県</option> 41<option value="3">香川県</option> 42<option value="4">愛媛県</option> 43<option value="5">高知県</option> 44<option value="1">福岡県</option> 45<option value="1">佐賀県</option> 46<option value="1">長崎県</option> 47<option value="1">熊本県</option> 48<option value="3">大分県</option> 49<option value="3">宮崎県</option> 50<option value="1">鹿児島県</option> 51<option value="3">沖縄県</option> 52</select> 53</div> 54 55<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物の構造種別: 56<select name="kouzou" onChange="goShisan()"> 57<option value="1">M</option> 58<option value="1">T</option> 59<option value="2">H</option> 60</select> 61</div> 62 63<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物保険金額: 64<select name="tatemono" onChange="goShisan()"> 65<option value="500">1,000万円</option> 66<option value="750">1,500万円</option> 67<option value="1000">2,000万円</option> 68<option value="1500">3,000万円</option> 69</select> 70</div> 71 72<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">家財保険金額: 73<select name="kazai" onChange="goShisan()"> 74<option value="0">補償なし</option> 75<option value="150">300万円</option> 76<option value="250">500万円</option> 77</select> 78</div> 79 80 81</div> 82 83<br style="clear: both;"> 84 85<div style="padding-top: 20px; margin-top: 20px; border-top: #ccc 1px solid;"> 86 <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> 87 <div style="width: 350px; border: #ccc 1px solid; float: left; margin-top: 20px;"> 88 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">補償内容</div> 89 <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> 90 <div style="margin: 10px;">家財の補償額:最大&nbsp;<span id="kazaiKKKoutput" style="font-size: 18px; font-weight: bold;">0</span>&nbsp;万円</div> 91 </div> 92 <div style="width: 350px; border: #ccc 1px solid; float: left; margin: 20px 0 0 20px;"> 93 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">保険料</div> 94 <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> 95 <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> 96 <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> 97 </div> 98 99</div> 100 101

###アドバイス等いただけたら幸いです。よろしくお願いいたします。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2015/10/31 15:17

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

退会済みユーザー

2015/10/31 15:40

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

退会済みユーザー

2015/10/31 15:47 編集

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

回答2

0

JavaScript/HTML

1 2<script> 3function goShisan() { 4 // form 取得 5 var shisanForm = document.forms["shisanForm"]; 6 7 // 各リスト選択肢とその値を取得 8 var selWhere = getSelectedValueAndText(shisanForm.where); 9 var selKouzou = getSelectedValueAndText(shisanForm.kouzou); 10 var selTatemono = getSelectedValueAndText(shisanForm.tatemono); 11 var selKazai = getSelectedValueAndText(shisanForm.kazai); 12 13 // カンマの位置を変更しました;; 14 var tanka = [ 15 [6.5 , 10.6] 16 , [6.5 , 13] 17 , [8.4 , 16.5] 18 , [11.8 , 24.4] 19 , [11.8 , 27.9] 20 , [13.6 , 24.4] 21 , [20.2 , 32.6] 22 ]; 23 // 計算(10円未満四捨五入して切り捨て) 24 var tankaKKK = tanka[selWhere.value - 1][selKouzou.value - 1]; 25 var tatemonoKKKTTL = Math.round((selTatemono.value * tankaKKK) / 10) * 10; 26 var kazaiKKKTTL = Math.round((selKazai.value * tankaKKK) / 10) * 10; 27 var allTTL = tatemonoKKKTTL + kazaiKKKTTL; 28 29 // 結果表示 30 kekkaOutput("tatemonoKKKoutput", selTatemono.value.toLocaleString()); 31 kekkaOutput("kazaiKKKoutput", selKazai.value); 32 kekkaOutput("whereoutput", selWhere.text); 33 kekkaOutput("kouzououtput", selKouzou.text); 34 kekkaOutput("idoutput", selWhere.text + " " + selKouzou.text); 35 kekkaOutput("tatemonooutput", tatemonoKKKTTL.toLocaleString()); 36 kekkaOutput("kazaioutput", kazaiKKKTTL.toLocaleString()); 37 kekkaOutput("alloutput", allTTL.toLocaleString()); 38 39 // リストの選択表示名と値を取得する 40 function getSelectedValueAndText(oSel) { 41 var index = oSel.selectedIndex; 42 43 // ☆- 0 ってやると、文字列 をお手軽に数値に変換できる(parseInt()と同じ) 44 return { value: oSel.options[index].value - 0, text: oSel.options[index].text }; 45 46 // 受け側で、ans = getSelectedValueAndText(shisanForm.where); ってやったとき、 47 // ans.value と ans.text で変数にアクセスできる 48 } 49 50 // 結果出力用メソッドを用意する(同じような記述の反復を避けるため) 51 function kekkaOutput(outputId, kekka) { 52 var item = document.getElementById(outputId); 53 item.innerHTML = kekka; 54 } 55 56} 57</script> 58<meta charset="utf-8" /> 59<div style="margin-top: 20px;"> 60<form name="shisanForm" style="font-size: 14px; font-weight: bold;"> 61<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px;">建物の所在地: 62<select name="where" > 63<option value="3">北海道</option> 64<option value="3">青森県</option> 65<option value="1">岩手県</option> 66<option value="3">宮城県</option> 67<option value="1">秋田県</option> 68<option value="1">山形県</option> 69<option value="2">福島県</option> 70<option value="4">茨城県</option> 71<option value="1">栃木県</option> 72<option value="1">群馬県</option> 73<option value="6">埼玉県</option> 74<option value="7">千葉県</option> 75<option value="7">東京都</option> 76<option value="7">神奈川県</option> 77<option value="3">新潟県</option> 78<option value="1">富山県</option> 79<option value="1">石川県</option> 80<option value="1">福井県</option> 81<option value="3">山梨県</option> 82<option value="1">長野県</option> 83<option value="3">岐阜県</option> 84<option value="7">静岡県</option> 85<option value="7">愛知県</option> 86<option value="7">三重県</option> 87<option value="1">滋賀県</option> 88<option value="3">京都府</option> 89<option value="6">大阪府</option> 90<option value="3">兵庫県</option> 91<option value="3">奈良県</option> 92<option value="7">和歌山県</option> 93<option value="1">鳥取県</option> 94<option value="1">島根県</option> 95<option value="1">岡山県</option> 96<option value="1">広島県</option> 97<option value="1">山口県</option> 98<option value="5">徳島県</option> 99<option value="3">香川県</option> 100<option value="4">愛媛県</option> 101<option value="5">高知県</option> 102<option value="1">福岡県</option> 103<option value="1">佐賀県</option> 104<option value="1">長崎県</option> 105<option value="1">熊本県</option> 106<option value="3">大分県</option> 107<option value="3">宮崎県</option> 108<option value="1">鹿児島県</option> 109<option value="3">沖縄県</option> 110</select> 111<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物の構造種別: 112 <select name="kouzou"> 113 <option value="1">M</option> 114 <option value="1">T</option> 115 <option value="2">H</option> 116 </select> 117</div> 118 119<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">建物保険金額: 120 <select name="tatemono"> 121 <option value="500">1,000万円</option> 122 <option value="750">1,500万円</option> 123 <option value="1000">2,000万円</option> 124 <option value="1500">3,000万円</option> 125 </select> 126</div> 127 128</div> 129<div style="width: 200px; float: left; background-color: #eee; padding:10px 0 10px 10px; margin-left: 20px;">家財保険金額: 130 <select name="kazai"> 131 <option value="0">補償なし</option> 132 <option value="150">300万円</option> 133 <option value="250">500万円</option> 134 </select> 135</div> 136 137 138</div> 139 140<br style="clear: both;"> 141 142<div style="padding-top: 20px; margin-top: 20px; border-top: #ccc 1px solid;"> 143 <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> 144 <div style="width: 350px; border: #ccc 1px solid; float: left; margin-top: 20px;"> 145 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">補償内容</div> 146 <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> 147 <div style="margin: 10px;">家財の補償額:最大&nbsp;<span id="kazaiKKKoutput" style="font-size: 18px; font-weight: bold;">0</span>&nbsp;万円</div> 148 </div> 149 <div style="width: 350px; border: #ccc 1px solid; float: left; margin: 20px 0 0 20px;"> 150 <div style="background-color: #ccc; font-weight: bold; padding: 10px;">保険料</div> 151 <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> 152 <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> 153 <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> 154 </div> 155 156</div> 157 158<br style="clear: both;"> 159<div style="width: 100%; text-align: right; "> 160 <button name="command" value="sisanMitumori" onclick="goShisan(); return false;">お見積もり</button> 161</div> 162

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

投稿2015/10/31 17:44

ipadcaron

総合スコア1693

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

HTML

1<script> 2'use strict'; 3function handleChange (event) { 4 var select = event.target || event.srcElement; 5 6 select.ownerDocument.getElementById('output-' + select.name).firstChild.data = select.value; 7} 8</script> 9<form id="sample"> 10 <label> 11 所在地 12 <select name="where" onChange="handleChange(event);"> 13 <option>北海道</option> 14 <option>青森県</option> 15 <option>岩手県</option> 16 <option>宮城県</option> 17 <option>秋田県</option> 18 <option>山形県</option> 19 <option>福島県</option> 20 <option>茨城県</option> 21 <option>栃木県</option> 22 <option>群馬県</option> 23 <option>埼玉県</option> 24 <option>千葉県</option> 25 <option>東京都</option> 26 <option>神奈川県</option> 27 <option>新潟県</option> 28 <option>富山県</option> 29 <option>石川県</option> 30 <option>福井県</option> 31 <option>山梨県</option> 32 <option>長野県</option> 33 <option>岐阜県</option> 34 <option>静岡県</option> 35 <option>愛知県</option> 36 <option>三重県</option> 37 <option>滋賀県</option> 38 <option>京都府</option> 39 <option>大阪府</option> 40 <option>兵庫県</option> 41 <option>奈良県</option> 42 <option>和歌山県</option> 43 <option>鳥取県</option> 44 <option>島根県</option> 45 <option>岡山県</option> 46 <option>広島県</option> 47 <option>山口県</option> 48 <option>徳島県</option> 49 <option>香川県</option> 50 <option>愛媛県</option> 51 <option>高知県</option> 52 <option>福岡県</option> 53 <option>佐賀県</option> 54 <option>長崎県</option> 55 <option>熊本県</option> 56 <option>大分県</option> 57 <option>宮崎県</option> 58 <option>鹿児島県</option> 59 <option>沖縄県</option> 60 </select> 61 </label> 62 <label> 63 構造 64 <select name="kouzou" onChange="handleChange(event);"> 65 <option>M構造</option> 66 <option>T構造</option> 67 <option>H構造</option> 68 </select> 69 </label> 70</form> 71 72<p>所在地: <span id="output-where">北海道</span></p> 73<p>構造: <span id="output-kouzou">M構造</span></p>

投稿2015/10/31 16:10

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ipadcaron

2015/10/31 17:45

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

2015/11/01 00:04

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問