人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

selectboxの項目に配列を代入し、送信先で計算したい(javascript)
<select>内の<option>タグに3つの数値の配列を代入(コード内で)し、送信先に項目名と配列の数値をわけて記録していきたいのですが、どのようなコードが適切なのかわかりません。

・やろうとしていること
1・各<select></select>タグ内にある<option></option>項目のコード内に、3つの数値の配列を代入したい。
2・選択した項目を送信し、4つのテキストボックスに「項目名、数値1、数値2、数値3」をわけて記録したい(項目名は追記で、数値1〜3はそれぞれ別にプラスして記録したい)。
3・送信ボタンの前に数値を入力するテキストボックスを作成し、数値を入力すると選択した項目の配列をかけ算して、送信された時に反映されるようにしたい。

用語の適切な使い方が間違っているかもしれません。分かり辛くて申し訳ありません。全てでなくて構いませんので、少しでもご存知でしたら教えていただけると助かります。よろしくお願いいたします。

●質問者: pocapontas
●カテゴリ:インターネット ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3

やりたいことがいまいち分からないので、とりあえず書いてみました。
h1.html の form を送信すると、h2.html を表示します。

h1.html

<script>
window.addEventListener("load", function() {
 var f = document.getElementById("f");
 if (f) {
 f.addEventListener("submit", function(ev) {
 var sel = ev.target.data;
 var index = sel.selectedIndex;
 var data = sel[index].value.split("|");
 var multi = ev.target.multi;
 if (/^\d+$/.test(multi.value)) {
 var n = parseInt(multi.value);
 data = data.map(function(i) {
 return parseInt(i) * n;
 });
 sel[index].value = data.join("|");
 console.log(data);
 }
 }, false);
 }
}, false);
</script>

<form id="f" action="h2.html">
<select name="data">
<option value="1|2|3">1</option>
<option value="10|20|30">10</option>
<option value="100|200|300">100</option>
</select>
<input type="text" id="multi">
<input type="submit" value="送信">
</form>

h2.html

<script>
window.addEventListener("load", function() {
 var m = /data=([^&]+)/.exec(location.search);
 var data = decodeURIComponent(m[1]).split("|");
 for (var i = 0 ; i < data.length ; ++i) {
 var e = document.getElementById("data_" + (i + 1));
 e.value = data[i];
 }
}, false);
</script>
<input type="text" id="data_1">
<input type="text" id="data_2">
<input type="text" id="data_3">

勝手に翻訳&解釈したところ。

もう少し、お題が具体的に示されている方が書きやすいです。
「具体的」というのはソースがどうこうというのではなくて、何をやりたいか。
例えば、

三つのオンライン書店のサイトがあって、それぞれの本の値段が分かってる。
画面から入力した消費税率を、それぞれの値段にかけて、
次のページに、書籍名と、消費税をかけた値段を表示したい。

とか(無理に質問の内容に寄せてます)。
# ちなみに、この程度だったら、送信先に移る前にできちゃう内容ですけれど。


思ってる内容と違ってたら、コメントしてください。

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ