dポイントプレゼントキャンペーン実施中！

ラジオボタンとドロップダウンの連動について

解決済

  • 質問者：falc
  • 質問日時：
  • 回答数：3件

ド素人の初心者ですが、必要に迫られて困っております。過去ログを探してみたのですが、見当たりませんでした。既出でしたら申し訳ありませんが、よろしくお願い致します。
---------

２つの項目からラジオボタンで選択後、
○リンゴ　○バナナ

ドロップダウンでそれぞれ
　リンゴの場合→１個・２個
　バナナの場合→１本・２本
と表示・選択するようにできますでしょうか。

またさらに、その下にドロップダウンを作成し、
（項目内容：現金・カード）

リンゴ・１個・現金　の場合は１００円と表示
リンゴ・１個・カードの場合は１０５円と表示
リンゴ・２個・現金　の場合は２００円と表示
リンゴ・２個・カードの場合は２０５円と表示

バナナ・１本・現金　の場合は２０円と表示
バナナ・１本・カードの場合は２５円と表示
...

といった感じにすることはできますでしょうか。
回りくどい感じで大変申し訳ございません。
よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.1ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

やり方は色々あると思いますが、とりあえず動くサンプルを作ってみました。


IEとFireFoxで動作確認しました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>ラジオボタンでセレクトリストの表示を変更する</title>
<script type="text/javascript">
<!--
var Price = new Array(2);
Price["apple"]=100;//それぞれの単価
Price["banana"]=20;
var Count = new Array(2);
Count["apple"]="個";//それぞれの数え方
Count["banana"]="本";
var Kind="apple"; //初期値はりんご
var Bias=0; //初期値は現金

function updateKind(f){//種類が変更されたときの処理
Kind=(f.kind[0].checked)? f.kind[0].value : f.kind[1].value ;
var selectForm = f.Number;
for(var i=0;i<selectForm.options.length;i++){
selectForm.options[i].text=(selectForm.options[i].text).charAt(0) + Count[Kind];
}
update(f);
}
function updateNumber(f){//数字が変更されたときの処理(特別することはない)
update(f);
}
function updatePay(f){//支払い方法が変更されたときの処理
Bias=(f.Pay.value=="cash")? 0 : 5; //cardの時＋５
update(f);
}
function update(f){//現在の設定で計算をする
f.price.value = Price[Kind] * eval(f.Number.value) + Bias;
}
// -->
</script>
</head>
<body onload="update(document.FORM1)">
<form name="FORM1">
<label><input type="radio" name="kind" value="apple" checked onclick="updateKind(this.form)">リンゴ</label>
<label><input type="radio" name="kind" value="banana" onclick="updateKind(this.form)">バナナ</label>
<select name="Number" onclick="updateNumber(this.form)">
<OPTION VALUE="1">１個
<OPTION VALUE="2">２個
<OPTION VALUE="3">３個
<OPTION VALUE="4">４個
<OPTION VALUE="5">５個
</select>
<br>
<select name="Pay" onclick="updatePay(this.form)">
<OPTION VALUE="cash">現金
<OPTION VALUE="card">カード
</select>
<input type="text" name="price" size="10" value="100" readonly>円
</form>
</body>
</html>
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございます！こんなにすばらしい回答をいただけるなんて、思ってもみませんでした。
ぜひともすぐに応用させていただきます。
本当に本当にありがとうございました。
またよろしくお願い致します（*^^*)

通報する
お礼日時：2005/03/31 13:31

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

>onclickで取れないのでonchangeを利用する手もあります


ryk1234さんの言われてる通りですね。ご指摘ありがとうございます。

自分でも指摘を・
＞selectForm.options[i].text=(selectForm.options[i].text).charAt(0) + Count[Kind];
は、個数が１桁であることを想定しています。selectのoptionの数があらかじめ判っているから決め打ちでもいいのでしょうが、通常２桁以上の場合も考慮するべきです。
上記の部分を
var len;
len = selectForm.options[i].text.length;
selectForm.options[i].text=(selectForm.options[i].text).substr(0,len-1) + Count[Kind];
に置き換えて下さい。
    • good
    • 1
    • 件
通報する

No.2

  • 回答者： ryk1234
  • 回答日時：

BLUEPIXYさんご提示のサンプルで動作すると思いますが1点だけ…



キーボード操作でリストボックスの値を変更した場合はonclickで取れないのでonchangeを利用する手もあります

横槍失礼致しました。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報