nameとidで区別できない値の自動計算について

質問

皆さんの質問や回答を参考にさせていただいている初心者です。

人参・大根・キャベツなどと複数のセレクトメニューがあり、他のスクリプトの都合上すべて同一のnameとid（例えばnameは全部Aでidは全部B）になってて、これは変えられない状況です。人参と大根とキャベツの区別なく全てのセレクトメニューで選ばれた野菜の合計を瞬時にテキストエリアに表示する方法がありましたら、できればソース付きでお教えください。

よろしくお願いいたします。

回答No.5

yambejp

こんなかんじでどうでしょ？
仕様は#3さんのを真似ました。
<script>
function calc( obj ){
var count=0;
var f=obj.form;
for(var i=0;i<f.length;i++){
if(f[i].name=="A" && f[i].value!="") count++;
}
f.output.value = count+"個選択";
}
</script>

<form>
<select name="A" onChange="calc( this );">
<option value="">選択なし
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<select name="A" onChange="calc( this );">
<option value="">選択なし
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<select name="A" onChange="calc( this );">
<option value="">選択なし
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<br>
<textarea name="output">0個選択</textarea>
</form>

回答No.4

神崎 渉瑠（@taloo）

nameが同じならgetElementsByName('A')や
document.forms[0].elements['A']で取得すればいいのでは？

IDの重複は(ry

回答No.3

da-te

こんにちは。

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

・HTML
<form name="main">
<select name="A" id="B" onChange="calc( this );">
<option value="選択なし">
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<select name="A" id="B" onChange="calc( this );">
<option value="選択なし">
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<select name="A" id="B" onChange="calc( this );">
<option value="選択なし">
<option value="人参">人参
<option value="大根">大根
<option value="キャベツ">キャベツ
</select>
<textarea name="output"></textarea>
</form>

・SCRIPT
var noSelected = "選択なし";
var count = 0;
function calc( obj ){
if( obj.value != noSelected ){
count++;
}else if( obj.value == noSelected ){
count--;
}
outPut( );
}
function outPut( ){
document.main.output.value = count;
}

こんな感じでいかがでしょうか。

＃余談ですが、ANo.1の内容は至極重要ですので、
＃今後の開発などでは考慮する事を強くお勧めします。

回答No.2

da-te

こんにちは。

＞人参と大根とキャベツの区別なく全てのセレクトメニュー
この部分がちょっとイメージできません。

１．複数のセレクトボックスがあって、それぞれに同じ野菜名がメニューになっているということでしょうか？
２．それぞれの野菜名でセレクトボックスがあるという事でしょうか？

よろしくお願いします。

お礼

拙い説明で申し訳ございません。

はい、人参や大根など複数のセレクトボックスがあるのですが、内容的には同じ物であるということなんです。よろしくお願いいたします。

回答No.1

noname#108740

HTMLはname属性は一つの文書の中で複数存在してもいいですが、
id属性は複数存在してはいけません。

これはバグの原因にもなりますから、修正したほうがいいです。