SELECTタグについて
-
0 名前： 匿名 ： 2006/06/18（日） 12:18 ID:rjD4NYjY
- はじめまして。
htmlのselectタグについて画面上は以下の様に配置されています、
＿＿＿＿＿＿
部 | |▽|
￣￣￣￣￣￣
＿＿＿＿＿＿ ＿＿＿＿
課 | |▽| 課名称 |＿＿＿＿ |
￣￣￣￣￣￣
このときに以下の様な部、課、課名称のデータがある時に部のSELECTタグ内容が変わった
時に課SELECTタグ内容を変え、課に対応する課名称(textボックス)は表示可能でしょうか？(jsを使って)
部 課 課名称
1 1 A
1 2 B
1 3 C
2 1 D
2 2 E
2 3 F
-
1 名前： m035 ◆Wpzr1YKOiq ： 2006/06/18（日） 12:18 ［URL］ ID:/WLKjd7O
- あなたの質問は「出来るかどうか」なので「できる」と答えておきます。
これでこの質問は終わりです。
きつい書き方をしていますが、この質問の仕方では仕方ありません。
現実的な方法を聞きたければ以下を考慮したうえでスレッドを立てたほうが良いでしょう。
・何が出来ないのか
・どこまで調べたか
・どうしたいのか
・現状のソース
-
2 名前： NullPo ： 2006/06/18（日） 12:18 ID:XoE1slt9
- こんな感じかな？
<script type="text/javascript">
<!--
function buChange(thatForm)
{
var buObj = thatForm.childNodes[0];
var kaObj = thatForm.childNodes[2];
var kaNameObj = thatForm.childNodes[4];
var buIx = buObj.selectedIndex;
var kaArray = [["A", "B", "C", "D"], ["E", "F", "G"], ["H", "I"]];
var newKaObj = document.createElement("select");
for(var kaIx = 0; kaIx < kaArray[buIx].length; kaIx++)
{
var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode(kaArray[buIx][kaIx]));
newKaObj.appendChild(newOption);
}
newKaObj.setAttribute("onchange", function(){kaChange(thatForm);});
kaNameObj.value = "";
thatForm.replaceChild(newKaObj, kaObj);
}
function kaChange(thatForm)
{
var buObj = thatForm.childNodes[0];
var kaObj = thatForm.childNodes[2];
var kaNameObj = thatForm.childNodes[4];
var buIx = buObj.selectedIndex;
var kaIx = kaObj.selectedIndex;
var kaNameArray = [["AAAAA", "BBBBB", "CCCCC", "DDDDD"], ["EEEEE", "FFFFF", "GGGGG"], ["HHHHH", "IIIII"]];
kaNameObj.value = kaNameArray[buIx][kaIx];
}
// -->
</script>
<form action="">
<select onChange="javascript:buChange(this.form)">
<option>一部</option>
<option>二部</option>
<option>三部</option>
</select>
<select onChange="javascript:kaChange(this.form)">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>
<input type="text" value="">
</form>
-
3 名前： underStone ： 2006/06/18（日） 12:18
- >>2
<select onChange="javascript:kaChange(this.form)">
ヘンな書き方を教えないでください。罪作りですよ。
-
4 名前： NullPo ： 2006/06/18（日） 12:18 ID:XoE1slt9
- >>2
みっつほど言うことがあります。
1.ヘンだという根拠を明示してください。
2.ヘンな書き方を教えることが罪作りである理由を明示してください。
3.訂正して>>0の方に教えてあげてください。
-
5 名前： NullPo ： 2006/06/18（日） 12:18 ID:XoE1slt9
- >>4は>>3に向けてでした。orz
-
6 名前： 匿名 ： 2006/06/18（日） 12:18 ID:rjD4NYjY
- >>0の書き込みをした者です。
急いでいた為とはいえ、>>1さんのおっしゃるとうりです。
NullPoさん
ありがとうございます。
-
7 名前： underStone ： 2006/06/18（日） 12:18
- >>4
どこがヘンかがわからないうちは、人さまにコードなど書かない方が
いいでしょう。マジわからんのですか？
-
8 名前： Pid ◆byEkK9OALr ： 2006/06/18（日） 12:18 ID:Vi/2deH/
- >>2,4
> for(var kaIx = 0; kaIx < kaArray[buIx].length; kaIx++)
もし生成する option 要素の数が多そうなら、kaArray[buIx].length のスナップショットを取った方が良いです。ループのたびに kaArray[buIx].length を取得するのは無駄です。
> newKaObj.setAttribute("onchange", function(){kaChange(thatForm);});
この書き方は止めて下さい。レガシーに newKaObj.onchange にセットするか、DOM2-Events を使って下さい（扱う対象が HTML 文書と分かりきっているなら DOM-HTML を使った方が無難で簡単ですし、そもそも HTML/XML とは別の機構であるイベントとスタイルへの setAttribute は避けるべきです）。
> onChange="javascript:buChange(this.form)"
onchange 属性の中身は %Script; です。%URI; ではありません。「javascript:」は、スキームではなく、単なるラベル（while から抜け出すときとかに使うアレ）と認識されます。
-
9 名前： カヅサツ ◆ThCi95HEzw ： 2006/06/18（日） 12:18 ［URL］ ID:O5hEMlpW
- http://www.tagindex.com/bbs/note.html
> はじめにお読みください
> 他者に対して「否定的な意見」を発言する際には、できるだけその「理由」や「代替案」を提示するようにしてください。
-
10 名前： Pid ◆byEkK9OALr ： 2006/06/18（日） 12:18 ID:Vi/2deH/
- >>8
> ループのたびに kaArray[buIx].length を取得するのは無駄
NodeList/HTMLCollection ではない単なる Array なら、それほど影響はないかな、と思い直しましたので、この部分は撤回します（まあ、スナップショットは必要に応じて取って下さい）。
とにかく、Style/Event に対して setAttribute するのだけは止めて下さい。モデルが全然違います。
-
11 名前： NullPo ： 2006/06/18（日） 12:18 ID:1Bb3RL38
- >>7
私がわかるかわからないかは関係ありません。
明確な根拠を明示せずに人の意見を否定するのは言葉足らずです。
>>8,10
了解しました。
あとで裏づけを取るため調べておきます。
-
12 名前： underStone ： 2006/06/18（日） 12:18
- >>11
＞明確な根拠を明示せずに人の意見を否定するのは言葉足らずです。
だったら、失礼。
私がいったのは、selectのイベント部分のみ。
スキームのつもりで書いているのか、あるいはPid氏の指摘のような
つもりなのかしらないけれども、初心者を自認する学習者にヘンな
スキーム風の書き方を教えるのだけはやめてもらいたい。
おかげで、あちこちの掲示板に氾濫している。これの動く根拠や保証
などどこにもないのだから。
JavaScriptをJavaと教えるに等しいとあえて言わせてもらう。
-
13 名前： NullPo ： 2006/06/18（日） 12:18 ID:1Bb3RL38
- >>12
了解しました。
それについては後ほど調べておきます。
-
14 名前： Pid ◆byEkK9OALr ： 2006/06/18（日） 12:18 ID:Vi/2deH/
- >>8,10
補足と言いますか書き忘れていましたが、
> newKaObj.setAttribute("onchange", function(){kaChange(thatForm);});
そもそも setAttribute の第二引数は DOMString（文字列）です。関数を与えることはできません（暗黙に文字列に型変換されることが期待されます）。
もしハンドラとして関数を与えたければ、IE なら、
・newKaObj.attachEvent ('onchange', function () { kaChange (thatForm); } );
また、DOM2-Events なら、
・newKaObj.addEventListener ('change', function (event) { kaChange (thatForm); }, false );
場合分けするのが面倒なら、JavaScript 1.3(?) 以来の
・newKaObj.onchange = function (event) { kaChange (thatForm); };
を使って下さい。
ネチネチと大変申し訳ありませんでしたが、node.prop = value; と node.setAttribute ('prop', value); が「等価」だという誤解が広まっている気がしますので、あえて述べさせて頂きました。この 2 つは、その機構も、その意味も、断じて違います。「等価」に見えるのは、あくまで IE の手抜き実装に過ぎません。
-
15 名前： NullPo ： 2006/06/18（日） 12:18 ID:1Bb3RL38
- >>14
なるほど、ご丁寧にありがとうございます。
