ドロップダウンリストボックスが未選択時にアラートウインドウを出したい。

解決済

質問者：toutetsu
質問日時：2005/09/20 15:50
回答数：3件

ドロップダウンリストボックスが選択されていない場合にアラートウインドウを出したいのですがうまくいきません。
どこが間違っているのでしょうか？
初歩的な質問で申し訳ありませんがご指摘よろしくお願いいたします。

<SCRIPT LANGUAGE="JavaScript">
function check(fm) {

if (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択' & fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') {
alert("サイズとカラーを選択してください！");
return false;
}

else {
if (fm.color.options[fm.color.selectedIndex].text == 'カラーを選択') {
alert("カラーを選択してください！");
return false;
}
else (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択') {
alert("サイズを選択してください！");
return false;
}
}
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color"><OPTION>カラーを選択</OPTION><OPTION>赤</OPTION><OPTION>青</OPTION></SELECT>
<SELECT name="size"><OPTION>サイズを選択</OPTION><OPTION>S</OPTION><OPTION>M</OPTION></SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
</body>
</html>

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： asahina02
回答日時：2005/09/20 15:56

else (fm.size.options[fm.size.selectedIndex].text == 'サイズを選択')

　この部分が間違ってます。
　正しくは
else if(　・・・・

それだけ直せば動いてるようですが。

- 0
- 件

通報する

この回答へのお礼

asahina02さん、早速のお返事ありがとうございます。
たったそれだけだったんですね。
何時間も悩んだ原因がこれとは悲しいやらうれしいやら複雑な気持ちです。
本当にありがとうございました。

通報する

お礼日時：2005/09/20 20:07

No.3

回答者： yambejp
回答日時：2005/09/20 20:42

＃２でさらっと書きましたがtextではなく

valueでチェックするようにします。
なぜならformで送られるデータ通常はvalueですから。
そのデータをチェックするのが効率的なのです。
確かにoptionにvalueを指定しないとtextが送られる
ようですが、プルダウンリストに表示するために整形
したりすることもあり、formで送るのに効率的だとは
いえません。できればvalueで送ることをお勧めします。

ですのでソース的にはこんなかんじ。

<SCRIPT LANGUAGE="JavaScript">
function check(fm) {
if(fm.size.options[fm.size.options.selectedIndex].value=="" ){
alert("サイズを選択してください！");
return false;
}else if(fm.color.options[fm.color.options.selectedIndex].value==""){
alert("カラーを選択してください！");
return false;
}
return true;
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color">
<OPTION>カラーを選択</OPTION>
<OPTION value="red">赤</OPTION>
<OPTION value="blue">青</OPTION>
</SELECT>
<SELECT name="size">
<OPTION value="onsize">ワンサイズ</OPTION>
</SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>

- 0
- 件

通報する

この回答へのお礼

yambejpさん、丁寧に教えていただきありがとうございます。
早速試してみました。
しかしながらよくよく考えてみると、このフォーム部分はHTMLなどまったくわからない素人のクライアントが頻繁に変更したり、追加したりすることを思い出しました。
このフォームだと<option>を<option value="red">や<option value="onsize">のように<option>ひとつずつに値を指定しなければなりません。
これは素人にはちょっと酷なような気がします。
美しくないJava Scriptですが、実用面を重視して最初のソースを使うことにします。
いろいろお騒がせして申し訳ありませんでした。
まだJava Scriptはわからないことだらけですのでまた近日中にお世話になるかもしれません。
そのときはまたぜひよろしくお願いいたします。

通報する

お礼日時：2005/09/20 21:43

No.2

回答者： yambejp
回答日時：2005/09/20 19:11

selectedIndexはoptionsのプロパティです。

fm.xxx.options.selectedIndexが0かどうか
（つまりは選択されていない）をみるか、
valueを与えてvalue==""を見るのが普通でしょう。
テキストでチェックするのはあまり美しくないと
思いますが・・・。

<SCRIPT LANGUAGE="JavaScript">
function check(fm) {
if(fm.size.options.selectedIndex==0 ){
alert("サイズを選択してください！");
return false;
}else if(fm.color.options.selectedIndex==0){
alert("カラーを選択してください！");
return false;
}
return true;
}
</script>
</head>
<body>
<FORM name="fm" onsubmit="return check(this)" action="drop.htm" method="POST">
<SELECT name="color">
<OPTION>カラーを選択</OPTION>
<OPTION value="red">赤</OPTION>
<OPTION value="blue">青</OPTION>
</SELECT>
<SELECT name="size">
<OPTION>サイズを選択</OPTION>
<OPTION value="s">S</OPTION>
<OPTION value="m">M</OPTION>
</SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>
</body>
</html>

この回答への補足

yambejpさん、早速のご回答ありがとうございます。
Java scriptは他所からコピペして動作させるのがやっとで、とてもとても美しいコードなんて書けません。
難しいコードを短時間で華麗に書く諸先輩の姿を遠巻きに眺めるのが関の山です。

さて早速教えていただいたコードを試してみました。
最初に提示したコードは問題なく動作しました。
ただ、ものによっては▼こういう場合もあります。
ドロップダウンリストボックスを使っているもののサイズがワンサイズだけのような場合です。
こういう場合はどのように対処したらよいのでしょうか？
もし何かよい方法がありましたら教えてください。
よろしくお願いいたします。

<FORM name="fm" onsubmit="return check(this)" action="" method="POST">
<SELECT name="color"><OPTION>カラーを選択</OPTION><OPTION>赤</OPTION><OPTION>青</OPTION></SELECT>
<SELECT name="size"><OPTION>ワンサイズ</OPTION></SELECT>
<INPUT type="submit" value="カートに入れる">
</FORM>