人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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つ並べたくない。)

説明が悪く申し訳ありません。わからないところがあれば補足をいたします。よろしくお願いいたします。


●質問者: tontonpokopoko
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:JavaScript コメント欄 ボックス リスト 入力
○ 状態 :終了
└ 回答数 : 8/8件

▽最新の回答へ

1 ● Marine-Blue
●40ポイント

"×"と同じ要領で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>
◎質問者からの返答

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

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

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

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

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


2 ● kebo987654
●40ポイント

プルダウンメニュー中で選択されている項目の番号は 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に変わっていますが、私が初歩的なミスをしている気がします。

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


3 ● peugeot
●40ポイント

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

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

(日付の概念がちょっとわかりにくかったので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日目が未設定でもいけるでしょうか。

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


4 ● peugeot
●100ポイント ベストアンサー

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」にチェックがあるため”|”だけが追加されてしまいます。

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

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


5 ● peugeot
●40ポイント

未選択を一番上ではなく真ん中に移動した際には以下の条件文の数値を変えれば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">


1-5件表示/8件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ