セレクトメニュー

[新着] Webテンプレートを仮オープンしました

0   名前： りんご ： 2007/05/09（水） 16:32  ID:gdO6X011 sub-9g
初歩的過ぎる質問なんですが
調べても分からなかったので・・

セレクトメニューにて1〜100までの通し番号を作成したいのですが

function selectList(){
indexList = new Array();
for(i = 1; i < 101; i++){
indexList.push(i - 1);
}
}

でよいでしょうか？
これをHTMLに読み込むにはどう記述すればよいでしょうか？
1   名前： 匿名 ： 2007/05/09（水） 16:32  ID:gFY2524F sub-Q5
こんにちは

よく分からなかったのですが
こういうことでしょうか？

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>無題ドキュメント</title>
<script type="text/javascript">
function setOptions(){
for(var i=1; i<101; i++){
document.forms[0].elements["select"].options[i] = new Option(i);
}
}
</script>
</head>

<body onload="setOptions();">
<form>
<select name="select">
</select>
</form>
</body>
</html>


ちなみに書いておいてなんですが
この場合Javascriptがoffの人は
何も表示されないので
選択すらできません

ので地味で大変なお仕事ですが
<option>1</option>
〜
<option>100</option>
まで
HTMLに直接書き込んだほうがよろしいかと思います。
2   名前： 匿名 ： 2007/05/09（水） 16:32  ID:gFY2524F sub-Q5
上記修正
document.forms[0].elements["select"].options[i-1] = new Option(i);
でお願いします。
3   名前： 匿名 ： 2007/05/09（水） 16:32  ID:BD0Er6nW sub-Cz
>>0
普通に document.write() で書き出せば良いのでは。もっとも、どこの何を通し番号にするのか不明なのですが。
<p>
  <script type="text/javascript">

var source = [ '<select>' ];

for (var i = 1; i <= 100; i++) {
    source.push ('<option>', i, '<\/option>');
}
source.push ('<\/select>');

document.write (source.join (''));

  </script>
</p>

また、>>1 の言う通り、非スクリプト環境では無意味です。


>>1
細かいことですが、XHTML を書くなら名前空間の指定を絶対に忘れないで下さい。これは XHTML の文法のみならず、document.forms、document.write()（要するに DOM HTML）を使用できるかどうかにも関わります。

# 更にうるさいことを言えば、XHTML の script 要素内で「<」と「&」を書いてはいけない。


スレ違いながら、最近のメジャーブラウザはクライアント側 XSLT に対応しているので、こんなのでもやれないことはない。
<!-- xmlns:xhtml="http://www.w3.org/1999/xhtml" -->
<xsl:template match="xhtml:select">
  <xsl:element name="select" namespace="http://www.w3.org/1999/xhtml">
    <xsl:call-template name="output.option"/>
  </xsl:element>
</xsl:template>

<xsl:template name="output.option">
  <xsl:param name="index" select="number(1)"/>
  <xsl:element name="option" namespace="http://www.w3.org/1999/xhtml">
    <xsl:attribute name="value">
      <xsl:value-of select="$index"/>
    </xsl:attribute>
    <xsl:value-of select="$index"/>
  </xsl:element>
  <xsl:if test="$index &lt; 100">
    <xsl:call-template name="output.option">
      <xsl:with-param name="index" select="$index + 1"/>
    </xsl:call-template>
  </xsl:if>
</xsl:template>
4   名前： りんご ： 2007/05/09（水） 16:32  ID:gdO6X011 sub-9g
ごめんなさい、現在こんな状況です。

<BODY>
<FORM NAME = "form1">
<TABLE BORDER = "0">
<TD>
<SELECT NAME = "cntValue" ID = "cntid">
<OPTION SLECTED VALUE = "1">1
</OPTION>
<OPTION VALUE = "2">2
　　　　　　　　・
　　　　　　　　・
<OPTION VALUE = "100">100

このセレクトメニューをすっきりさせたいのです。
5   名前： 匿名 ： 2007/05/09（水） 16:32  ID:gFY2524F sub-Q5
>>3
失礼しました。
勉強になります…ありがとうございます。

>>4
あの何となく気持ちが？伝わりました。。
但し、
HTML上から何らかの方法（Javascript、その他）ですっきりさせると
その環境に対応してない人は見れなくなってしまいます。
その選択肢がサイトの重要なポジションを占めている時、
困ったことになってしまいます。

更新が多い等、何らかの理由で1〜3の方法をとる場合、
そのあたりのリスクを承知の上で実行することになります。


それとも、ひょっとして僕が何か勘違いしちゃってます？
6   名前： りんご ： 2007/05/09（水） 16:32  ID:gdO6X011 sub-9g
すいません。
ただ勉強中でこういう処理はどうやるのか知りたかったので。
実際HP上で使う時は皆さんの意見を参考にさせて頂きます。
この方法はあまり皆さんやられないのですかね？
7   名前： 匿名 ： 2007/05/09（水） 16:32  ID:789vnnDI sub-Ds
= new Option(i,i); //?
8   名前： 匿名 ： 2007/05/09（水） 16:32  ID:gFY2524F sub-Q5
う〜む
ドウナンデショウカ…

個人的見解を述べさせて頂くと

全ページ共通のヘッダーやサイドメニューを書き出す時は
Javascript…何故ならば変更のたびに全HTMLファイルを書き変えるのは厳しいので。
（ただし<noscript>は記述する）

他の場合は
HTMLファイルに直接書き込む…より多くの人が閲覧できるようにするため。

としています。
この下に書かれるであろう？より多くの人の意見を参考にしてみることをお勧めします。
9   名前： 匿名 ： 2007/05/09（水） 16:32  ID:BD0Er6nW sub-Cz
>>6
私も >>5 に同意です。この件に関しては、必ず JavaScript が動作する前提の Web アプリケーションでもない限り、基本的に JavaScript という選択肢はありません。

(1). サーバ側で許可されていれば、CGI/SSI などを利用する。
(2). ツールなどを利用して、あらかじめ手元で通し番号を作成しておく。

(1) ならば、例えば SSI の例。
<select>
  <!--#include virtual="output-options.cgi" -->
</select>

output-options.cgi:
#!/usr/bin/perl

my $src, $ii;

for ($ii = 1; $ii <=100; $ii++) {
    $src .= qq(<option value="$ii">$ii</option>);
}

print "Content-Type: text/html\n\n" . $src . "</select>";
exit 0;

もし、どうしても JavaScript で行うのであれば、JavaScript が実行されない環境でもアクセス可能なように、必ず代替手段を設けて下さい（ですから結局、全く無意味です）。
一覧へ戻る