1日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
2日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
3日目以降も続く↓
結果は、
”阪神|横浜|巨人|広島”
と要素を”|”で区切ります。
またチーム未入力(--)は値を求めずに飛ばすのが望みです。
(”阪神||巨人|広島”と||を2つ並べたくない。)
説明が悪く申し訳ありません。わからないところがあれば補足をいたします。よろしくお願いいたします。
1日目(前日)迄のデータが未記入の場合か否かを判断すれば宜しいかと。
<form name="create">
1日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
2日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
3日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
↓
続く
↓
<input type="button" value="クリック" onclick="mySet()">
<input type="text" size="30" name="data">
</form>
<script type="text/javascript"><!--</p> <p>function mySet(){</p> <p>var choise=document.getElementsByName('choise');</p> <p>var str = "";</p> <p>for(var i=0; i< choise.length; ++i){</p> <p> var index = choise[i].selectedIndex;</p> <p> if( index != 0 )</p> <p> {</p> <p> if ( str.length == 0 )</p> <p> str = choise[i].options[index].value;</p> <p> else</p> <p> str += "|" + choise[i].options[index].value;</p> <p> }</p> <p>}</p> <p>document.create.data.value = str;</p> <p>}</p> <p>// --></script>
"×"と同じ要領でvalueの値に"|"を含めることは出来ないのでしょうか。
もし出来ない場合は空欄判定の直後で文字列の追加処理を行うと良いのでは。
for(var i=0,l=choise.length,str=new Array(l),n;i<l;++i){ if(isNaN(n=parseInt(number[i].value,10))) str[i]="-"; else{ str[i]=choise[i].value+n.toString(10) + "|"; } } </pre>
回答をありがとうございます。
前回の続きと書いてしまって申し訳ありません。
今回は前回とは違う質問で枚数の書き込みはありません。
また値の最後に”|”は付けたくないのです。
まだ試してないのでいろいろ試させてください。
プルダウンメニュー中で選択されている項目の番号は Element.selectedIndex で得られるので、
それが0でなかった場合のみ配列に加えるようにすればよいかと思います。
function getValue(){ var choise=document.getElementsByName('choise'); for(var i=0,l=choise.length,ret=[];i<l;++i) if(choise[i].selectedIndex!=0) ret.push(choise[i].value); return ret.join('|'); } alert(getValue());//阪神|横浜|巨人|広島...
前回説明が分かりにくかったようで申し訳ないです。。
kebo987654さま、前回はピンポイントの回答をありがとうございました。
今回は思うように動作がしないようです・・
関数名がgetValueに変わっていますが、私が初歩的なミスをしている気がします。
前回のようにフォームに値を戻す場合はどうすればようでしょうか・・?
つまり選択された際だけ値を連結すると言う事でしょうか?
以下のような条件文で行けると思いますがどうでしょうか?
(日付の概念がちょっとわかりにくかったので1日前までの結果をHidden "before_choice"に格納されているという前提で記載しています。)
var new_choice = "";
var index = form.choice.selectedIndex;
if( index >= 1) // チーム入力の場合
{
new_choice = form.befor_choice.value + "|" + form.choice.option[index].value;
}
回答をありがとうございます。
もし1日目が未設定でもいけるでしょうか。
まだ検証前なので、お時間をください。
1日目(前日)迄のデータが未記入の場合か否かを判断すれば宜しいかと。
<form name="create">
1日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
2日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
3日目
<select name="choise">
<option value="">--</option>
<option value="阪神">阪神</option>
<option value="巨人">巨人</option>
<option value="横浜">横浜</option>
<option value="広島">広島</option>
</select>
↓
続く
↓
<input type="button" value="クリック" onclick="mySet()">
<input type="text" size="30" name="data">
</form>
<script type="text/javascript"><!--</p> <p>function mySet(){</p> <p>var choise=document.getElementsByName('choise');</p> <p>var str = "";</p> <p>for(var i=0; i< choise.length; ++i){</p> <p> var index = choise[i].selectedIndex;</p> <p> if( index != 0 )</p> <p> {</p> <p> if ( str.length == 0 )</p> <p> str = choise[i].options[index].value;</p> <p> else</p> <p> str += "|" + choise[i].options[index].value;</p> <p> }</p> <p>}</p> <p>document.create.data.value = str;</p> <p>}</p> <p>// --></script>
peugeotさま、コードをありがとうございます。
私が望むんだように正常に動作しています。
もし「selected」を追加するとどうなるでしょうか?
(<option value="" selected>--</option>)
リスト項目に膨大な量があるとして未入力をリストの真ん中あたりに設置するとします。
現状では「selected」にチェックがあるため”|”だけが追加されてしまいます。
かなり複雑になってしまうでしょうか?
よろしくお願いいたします。
未選択を一番上ではなく真ん中に移動した際には以下の条件文の数値を変えればOKです。
var index = choise[i].selectedIndex;
if( index != 0 )
1番上(要素0)で無いときという条件で判断しているので、たとえば3番目にした場合には
var index = choise[i].selectedIndex;
if( index != 2 )
にすればselectedで真ん中をデフォルトにしても問題ありません。
peugeotさま、回答をありがとうございます。
求めていたものが出来上がりました。
最後になりますが、
膨大なリスト項目とリストボックス数を複数表示させたいため、
以下のような(リスト項目は外部ファイルにしようと思います)書き方をしましたが、
もっとスマートな書き方があればご教授ください。
お願いいたします。
<form name="create">
<script type="text/javascript"></p> <p>function listbox(){</p> <p> document.write('<select name="choise">');</p> <p> document.write('<option value="阪神">阪神</option>');</p> <p> document.write('<option value="巨人">巨人</option>');</p> <p> document.write('<option value="横浜">横浜</option>');</p> <p> document.write('<option value="" selected>--</option>');</p> <p> document.write('<option value="広島">広島</option>');</p> <p> document.write('<option value="ヤク">ヤク</option>');</p> <p> document.write('<option value="中日">中日</option>');</p> <p> document.write('</select><br>');</p> <p>}</p> <p>document.write('1日目');</p> <p>listbox();</p> <p>document.write('2日目');</p> <p>listbox();</p> <p>document.write('3日目');</p> <p>listbox();</p> <p>document.write('4日目');</p> <p>listbox();</p> <p>//5日目以降も続く↓</p> <p></script>
<input type="button" value="クリック" onclick="mySet()">
<input type="text" size="30" name="data">
</form>
<script type="text/javascript">
でしたら未入力リストのvalueをつかって区別すればよろしいのではないのでしょうか?
<option value="" selected>--</option>ならvalueが空文字列なので、
function mySet(){ var choise=document.getElementsByName('choise'); for(var i=0,l=choise.length,ret=[],ind;i<l;++i) if(choise[i].options[ind=choise[i].selectedIndex]!="") ret.push(choise[i].options[ind].value); document.create.data.value=ret.join(''); }
kebo987654さま、ありがとうございます。
"|"と付け足すのが目的なので、kebo987654さまの前回のコードから、
(selectedIndex!=0)箇所の数値を変えることで
求めていた動作が確認できました。
今回お二方の微妙に違うコードをいただいたことは大変参考になり勉強になりました。
すぐにまた違う疑問がわくと思いますが今後もどうぞよろしくお願いします。m(_)m
Arrayとループ文を使えばもっとシンプルに出来ると思います。
(Ajaxを使うのが一番スマートですが)
表示時のonLoadでselectの初期値を設定するサンプルです
<html>
<head></head>
<body onLoad="defSet()">
<form name="create">
1日目
<select name="choise">
</select>
2日目
<select name="choise">
</select>
3日目
<select name="choise">
</select>
4日目
<select name="choise">
</select>
5日目
<select name="choise">
</select>
↓
続く
↓<input type="button" value="クリック" onclick="mySet()">
<input type="text" size="30" name="data">
</form>
<script type="text/javascript"></p> <p><!-- </p> <p>function defSet()</p> <p>{</p> <p> var op_label = new Array("巨人","阪神","--","横浜","広島");</p> <p> var op_value = new Array("巨人","阪神","","横浜","広島");</p> <p> var choise=document.getElementsByName('choise');</p> <p> for(var i=0; i< choise.length; ++i){</p> <p> for(var j=0; j< choise.length; ++j){</p> <p> choise[i].options[j] = new Option(op_label[j], op_value[j]);</p> <p> }</p> <p> choise[i].selectedIndex=2;</p> <p> }</p> <p>}</p> <p>function mySet()</p> <p>{</p> <p> var choise=document.getElementsByName('choise');</p> <p> var str = "";</p> <p> for(var i=0; i< choise.length; ++i){</p> <p> var index = choise[i].selectedIndex;</p> <p> if( index != 2 )</p> <p> {</p> <p> if ( str.length == 0 )</p> <p> str = choise[i].options[index].value;</p> <p> else</p> <p> str += "|" + choise[i].options[index].value;</p> <p> }</p> <p> }</p> <p> document.create.data.value = str;</p> <p>}</p> <p>//--></script>
</body>
</head>
peugeotさま、回答をありがとうございます。
参考にさせていただきます。試しているうちにまた疑問が出たのですが、
for文のループに関してです。
例えば今回のリスト表示の数を奇数だけパイプ線で区切りたいのですが、
こんな感じ→ 1|3|5|7|9|・・・
for(var j=1;j<=ret.length/2;j++)
document.write(2*j-1+"|");
とdocument.writeを使えばうまくいくのですが、
他の方法で要素を結合しようとすると、
for(var j=1;j<=ret.length/2;j++)
document.create.data2.value=2*j-1+"|";
ループが終了していて1番高い数字が1つだけ表示されてしまいます。
(ret.lengthはリストの数です)
調べたところクロージャなどを使って解決するようなのですが、
いまいちわかりません。何度も申し訳ありませんが、教えていただけないでしょうか?
よろしくお願いします。
1度上の文を記載しましたが、
また新たに「はてな」で質問させていただきます。
もしよろしければ今後もご教授いただければと思います。
よろしくお願いいたします。
peugeotさま、コードをありがとうございます。
私が望むんだように正常に動作しています。
もし「selected」を追加するとどうなるでしょうか?
(<option value="" selected>--</option>)
リスト項目に膨大な量があるとして未入力をリストの真ん中あたりに設置するとします。
現状では「selected」にチェックがあるため”|”だけが追加されてしまいます。
かなり複雑になってしまうでしょうか?
よろしくお願いいたします。