javascriptのフォームで複数質問のリストボックスから、値を求める勉強をしています。前回(コメント欄参照)の続き。


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人5回まで
  • 登録:
  • 終了:2009/04/21 16:12:30
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:peugeot No.4

回答回数131ベストアンサー獲得回数5

ポイント100pt

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>

id:tontonpokopoko

peugeotさま、コードをありがとうございます。

私が望むんだように正常に動作しています。

もし「selected」を追加するとどうなるでしょうか?

(<option value="" selected>--</option>)

リスト項目に膨大な量があるとして未入力をリストの真ん中あたりに設置するとします。

現状では「selected」にチェックがあるため”|”だけが追加されてしまいます。

かなり複雑になってしまうでしょうか?

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

2009/04/19 09:40:44

その他の回答7件)

id:Marine-Blue No.1

回答回数238ベストアンサー獲得回数12

ポイント40pt

"×"と同じ要領で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>
id:tontonpokopoko

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

前回の続きと書いてしまって申し訳ありません。

今回は前回とは違う質問で枚数の書き込みはありません。

また値の最後に”|”は付けたくないのです。

まだ試してないのでいろいろ試させてください。

2009/04/18 20:26:55
id:kebo987654 No.2

回答回数38ベストアンサー獲得回数10

ポイント40pt

プルダウンメニュー中で選択されている項目の番号は 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());//阪神|横浜|巨人|広島...

前回説明が分かりにくかったようで申し訳ないです。。

id:tontonpokopoko

kebo987654さま、前回はピンポイントの回答をありがとうございました。

今回は思うように動作がしないようです・・

関数名がgetValueに変わっていますが、私が初歩的なミスをしている気がします。

前回のようにフォームに値を戻す場合はどうすればようでしょうか・・?

2009/04/18 20:29:55
id:peugeot No.3

回答回数131ベストアンサー獲得回数5

ポイント40pt

つまり選択された際だけ値を連結すると言う事でしょうか?

以下のような条件文で行けると思いますがどうでしょうか?

(日付の概念がちょっとわかりにくかったので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;

}

id:tontonpokopoko

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

もし1日目が未設定でもいけるでしょうか。

まだ検証前なので、お時間をください。

2009/04/18 20:26:24
id:peugeot No.4

回答回数131ベストアンサー獲得回数5ここでベストアンサー

ポイント100pt

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>

id:tontonpokopoko

peugeotさま、コードをありがとうございます。

私が望むんだように正常に動作しています。

もし「selected」を追加するとどうなるでしょうか?

(<option value="" selected>--</option>)

リスト項目に膨大な量があるとして未入力をリストの真ん中あたりに設置するとします。

現状では「selected」にチェックがあるため”|”だけが追加されてしまいます。

かなり複雑になってしまうでしょうか?

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

2009/04/19 09:40:44
id:peugeot No.5

回答回数131ベストアンサー獲得回数5

ポイント40pt

未選択を一番上ではなく真ん中に移動した際には以下の条件文の数値を変えればOKです。

var index = choise[i].selectedIndex;

if( index != 0 )

1番上(要素0)で無いときという条件で判断しているので、たとえば3番目にした場合には

var index = choise[i].selectedIndex;

if( index != 2 )

にすればselectedで真ん中をデフォルトにしても問題ありません。

id:tontonpokopoko

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">2009/04/20 10:29:01

id:kebo987654 No.6

回答回数38ベストアンサー獲得回数10

ポイント100pt

でしたら未入力リストの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('');
}
id:tontonpokopoko

kebo987654さま、ありがとうございます。

"|"と付け足すのが目的なので、kebo987654さまの前回のコードから、

(selectedIndex!=0)箇所の数値を変えることで

求めていた動作が確認できました。

今回お二方の微妙に違うコードをいただいたことは大変参考になり勉強になりました。

すぐにまた違う疑問がわくと思いますが今後もどうぞよろしくお願いします。m(_)m

2009/04/20 10:21:44
id:lvgoogle004 No.7

回答回数44ベストアンサー獲得回数0

(はてなにより削除しました)

id:tontonpokopoko

リンク先は質問とは無関係のショップのようですが、

こんなことをしていいのでしょうか・・

2009/04/20 07:09:26
id:peugeot No.8

回答回数131ベストアンサー獲得回数5

ポイント40pt

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>

id:tontonpokopoko

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度上の文を記載しましたが、

また新たに「はてな」で質問させていただきます。

もしよろしければ今後もご教授いただければと思います。

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

2009/04/21 16:07:33
  • id:tontonpokopoko
    分かりにくいので質問欄の補足です。

    3日目以降も同様な質問が続きます。

    チェック結果が4つあれば、
    ”阪神|横浜|巨人|広島”

    と要素を”|”で区切ります。
    またチーム未入力(--)は値を求めずに飛ばすのが望みです。
    ”阪神||巨人|広島”と||を2つ並べたくない。
    あるいは
    ”阪神|横浜|巨人|広島||||||”と質問数だけ最後に||を並べたくない。


    説明が悪く申し訳ありません。わからないところがあれば補足をいたします。よろしくお願いいたします。
  • id:tontonpokopoko
    *以下は前回質問した入力欄があり空欄を”-”とするコードです。



    <form name="create">
    対戦カードと枚数をお書きください<br>
    1日目
    <select name="choise">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="number">(枚数、入力式)
    <br>

    2日目
    <select name="choise">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="number">
    <br>

    3日目
    <select name="choise">
    <option value="阪神×">阪神</option>
    <option value="巨人×">巨人</option>
    <option value="横浜×">横浜</option>
    <option value="広島×">広島</option>
    </select>
    ×
    <input type="text" size="2" name="number">

    <br>↓<br>続く<br>↓<br>
    <input type="button" value="クリック" onclick="mySet()"><br>
    <input type="text" size="30" name="data">
    </form>

    <script type="text/javascript"><!--
    function mySet(){
    var choise=document.getElementsByName('choise');
    var number=document.getElementsByName('number');
    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);
    }
    }
    document.create.data.value=str.join('|');
    }
    // --></script>
  • id:tontonpokopoko
    </p> <p>が自動で挿入されてコードが見づらいので、こちらに完成したものを書きます。

    <form name="create">
    <script type="text/javascript">
    function listbox(){
    document.write('<select name="choise">');
    document.write('<option value="阪神">阪神</option>');
    document.write('<option value="巨人">巨人</option>');
    document.write('<option value="横浜">横浜</option>');
    document.write('<option value="" selected>--</option>');
    document.write('<option value="広島">広島</option>');
    document.write('<option value="ヤク">ヤク</option>');
    document.write('<option value="中日">中日</option>');
    document.write('</select><br>');
    }
    document.write('1日目');
    listbox();
    document.write('2日目');
    listbox();
    document.write('3日目');
    listbox();
    document.write('4日目');
    listbox();

    //5日目以降も続く↓
    </script>

    <input type="button" value="クリック" onclick="mySet()">
    <input type="text" size="30" name="data">
    </form>

    <script type="text/javascript"><!--
    function mySet(){ var choise=document.getElementsByName('choise');
    var str = "";
    for(var i=0; i< choise.length; ++i){ var index = choise[i].selectedIndex;
    if( index != 3 ) { if ( str.length == 0 ) str = choise[i].options[index].value;
    else str += "|" + choise[i].options[index].value; }
    }
    document.create.data.value = str;
    }

    // --></script>
  • id:juner
    <p>~</p>の自動挿入については、
    今更かもしれませんが、スーパーpre記法を使えば善かったのだと思います。
    http://hatenadiary.g.hatena.ne.jp/keyword/%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%9F%E3%82%B3%E3%83%BC%E3%83%89%E3%82%84%E3%81%AF%E3%81%A6%E3%81%AA%E8%A8%98%E6%B3%95%E3%82%92%E3%81%9D%E3%81%AE%E3%81%BE%E3%81%BE%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B%EF%BC%88%E3%82%B9%E3%83%BC%E3%83%91%E3%83%BCpre%E8%A8%98%E6%B3%95%EF%BC%89
  • id:tontonpokopoko
    junerさま、ありがとうございます。
    スーパーpre記法が必要なんですね。
    今後に長いコードを書くときには使わせていただきます。
    この間の回答、そしてこのコメントもありがとうございました。
    まだ疑問だらけなので、もし気になることがあれば教えていただければと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません