２つのセレクトボックスで選ばれた結果をショッピングカートに渡したい

質問

同一ページ内に次の様な２つのセレクトボックスが有ります。
それぞれ選択された内容を足してショッピングカートに送りたいのですがどうしたら良いのでしょうか？

セレクトボックス１
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc" selected="selected">ccc</option>

セレクトボックス２
<option value="100">100</option>
<option value="200">200</option>
<option value="300" selected="selected">300</option>

●セレクトボックス１→aaaを選択
　セレクトボックス２→100を選択
　ショッピングカートには「aaa100」で渡す

●セレクトボックス１→cccを選択
　セレクトボックス２→200を選択
　ショッピングカートには「ccc200」で渡す

全くの初心者ですがよろしくお願いします。

回答No.2

yambejp

前回も書きましたがショッピングカート（サーバー側）がどういうデータを
うけとることができるかというのが問題なのですが・・・

単純に今回与えられた材料だけで考えれば以下のようなやり方でできます。
<script>
function hoge(f){
var c=document.getElementById('itemCode').value;
var n=document.getElementById('itemNumber').value
if(!c || !n){
alert(選択してくれ);
return false;
}
f.item.value=c+n;
return true;
}
</script>
<form onSubmit="return hoge(this)">
■数量を選択<br>
<select id="itemCode">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc" selected="selected">ccc</option>
</select><br>
<select id="itemNumber">
<option value="100">100</option>
<option value="200">200</option>
<option value="300" selected="selected">300</option>
</select><br>
<input type="hidden" name="amount" value="1">
<input type="hidden" name="action" value="cart_add">
<input type="hidden" name="item" value="">
<input type="image" src="?http://www.xxx.com/img.gif"? alt="カートに入れる" width="50" height="30">
</form>

しかし仕様上かなり無理があるでしょう。aaa100～aaa300はあっても、
実はccc200はないとか・・・こまかく希望もでてくるでしょうから。
いっそのことスクリプトなんて使わずにoptgroupを使えば、すっきりするのでは？

<form>
<select name="item">
<optgroup label="aaa">
<option value="aaa100">aaa100</option>
<option value="aaa200">aaa200</option>
<option value="aaa300">aaa300</option>
</optgroup>
<optgroup label="bbb">
<option value="bbb100">bbb100</option>
<option value="bbb200">bbb200</option>
<option value="bbb300">bbb300</option>
</optgroup>
<optgroup label="ccc">
<option value="ccc100">ccc100</option>
<option value="ccc200">ccc200</option>
<option value="ccc300" selected>ccc300</option>
</optgroup>
</select>
</form>

回答No.1

yambejp

ショッピングカート側のインタフェース次第ですね。
どのような引数をとってくれるのか仕様がわからないと微妙です。

javascriptでの処理であれば、あらかじめhidden領域をつくっておき
各セレクトボックスのonchangeイベントでhiddenの値を設定すれば
よいでしょう

ただし、aaa100やccc200といったデータがなぜ必要になるのでしょうか
２番目のセレクトボックスは型番？数量？
もし数量なら、セパレータなしに一つの要素にしてしまったら、
サーバー側で処理が煩雑になるのであまり一般的ではないと思います

補足

早速のご回答ありがとうございます。

現在は下記の通りセレクトボックスが１つしかありません。
<form action="http://www.xxx.com/index.php" method="post">
<center><table><tr><td>
<div align=left>■数量を選択
<select name="itemCode">
<option value="aaa">aaa</option>
<option value="bbb">bbb</option>
<option value="ccc" selected="selected">ccc</option>
</select>
<input type="hidden" name="amount" value="1">
<input type="hidden" name="action" value="cart_add">
<input type="image" src="http://www.xxx.com/img.gif" alt="カートに入れる" width="50" height="30">
</div>
</td></table></center>
</form>

ここにもう一つ他の情報のセレクトボックスを設けたいのです。
<option value="100">100</option>
<option value="200">200</option>
<option value="300" selected="selected">300</option>

そして選択された２つのvalue部分を結合してカートに送りたいのです。品番「aaa100」とか・・・品番「ccc200」とか・・・

まだ説明不足でしょうか？