出産前後の痔にはご注意!

createElementで、フォームを生成しています。
コンボボックスが変更されたら、アラームを表示させるようにしたいのですが上手くいきません。
どのようにしたら、良いのでしょうか?
よろしくお願いします。

以下ソースになります。
上から24行目付近で、selectにonChangeを設定しています。
--------------------------------------------------------------------
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>テスト</title>

<script type="text/javascript">
function test() {
var buf = document.createElement('div');
buf.innerHTML = document.form1.src.value;

var nodes = buf.querySelectorAll('*[class="line"]');

//formの生成
var Frm = document.getElementById("setform"); //要素を表示する場所(親要素)
var Form = document.createElement("form"); //新規にform要素を生成
Form.name = "dynform";
Frm.appendChild(Form); //Frmの子要素としてFormを追加

// select要素 コンボボックス作成
var Slt = document.createElement("select"); //selectタグを生成
Slt.name = "stasel";
Slt.id = "stasel";
Slt.onChange = "alert('今だ')"; //この部分でselectにonChange を設定している
Slt.size="1"; //コンボボックス用にサイズを1にする


for (var i=0; i<nodes.length; i++) {

var Ops = document.createElement("option");

if (/Firefox/.test(navigator.userAgent)) {
var regm = nodes[i].rows[0].cells[0].textContent.match(/20[0-9][0-9]年[0-1]?[0-9]月/);
} else {
var regm = nodes[i].rows[0].cells[0].innerText.match(/20[0-9][0-9]年[0-1]?[0-9]月/);
}

var listval = document.createTextNode(regm); //生成する要素の文字列
Ops.value = regm;
Ops.appendChild(listval); //Spnに表示する文字列追加

Slt.appendChild(Ops); //Sltの子要素としてOpsを追加
}

Frm.appendChild(Slt); //Frmの子要素としてSltを追加

var Br=document.createElement("br"); //改行
Frm.appendChild(Br); //Frmの子要素としてBrを追加
var Br=document.createElement("br"); //改行
Frm.appendChild(Br); //Frmの子要素としてBrを追加

document.getElementById('stasel').options[0].selected = true;
}
// -->
</script>

</head>
<body>

<p>自動出力</p>
<form name="form1">
<p>テキストエリアにソースを張り付けて下さい</p>
<p>
<textarea id="src" rows="5" cols="200">
</textarea>
</p>
<p>
<input type="button" value="実行" onClick="test()">
</p>
</form>

<div id="setform">
</div>

</body>
</html>

--------------------------------------------------------------------

以下の文をテキストエリアに入力しています。
--------------------------------------------------------------------
<table class="line">
<tr>
<td>2011年1月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年2月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年3月14日</td>
</tr>
</table>
<table class="line">
<tr>
<td>2011年4月14日</td>
</tr>
</table>
--------------------------------------------------------------------

このQ&Aに関連する最新のQ&A

A 回答 (2件)

#1です。



>Slt.id = "stasel";」と記述しております。
大変失礼いたしました。 うっかり、見落としていました。
ただし、無条件でセレクト要素を追加しているので、対象とするclass="line"の要素が存在しない場合、空のセレクト要素になってしまうために、同じ行でoptions[0]が存在しないことでエラーになる可能性があります。(実はこれで勘違いしてしまいました)


>コンボボックスが変更されたら、アラームを表示させるようにしたいのですが上手くいきません。
肝心なところを書き忘れていましたね。(これまた失礼いたしました)

 //Slt.onChange = "alert('今だ')"; //この部分でselectにonChange を設定している
 Slt.onchange = function(){ alert('今だ'); };

で、いけるかと思います。


他の方法としては、
 Slt.addEventListener( "change", function(){~~}, false );  //for fx
 Slt.attachEvent( "onchange" , function(){~~} );  //for IE
などでイベントをセットする方法もあります。
    • good
    • 0
この回答へのお礼

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

教えて頂いた通り、書き直しましたところ意図した通り動作しました。

この度は本当にありがとうございました。

お礼日時:2011/12/12 19:49

何をどうしたいのかがよくわかりませんが、ご提示のものが動作すればよいのであれば…




最後の document.getElementById('stasel')でエラーになっていますので、
(該当するidの要素がないので)
想像するところセレクト要素を取得したいのでしょうから、セレクトを生成した時に
 Slt.id = "stasel";
の定義をしておけば動作するようになります。
(querySelectorに未対応のブラウザだと動きませんが)


でも、このままだと、ボタンを押される毎に同じidのセレクト要素が作成されることになってしまいます。
それなので、document.getElementById('stasel')も意図した要素が返されない可能性が…

この回答への補足

早速のご回答有難うございます。

まず、IDがないというご指摘ですが、23行目に「Slt.id = "stasel";」と記述しております。
ですので、IDがないのでエラーが出たとは思えないのですが間違っているでしょうか?

もう1つの、「同じidのセレクト要素が作成される」という事ですが、ボタンを押したときに既に要素が作られていたら削除する仕様になっていますので、同じ要素が繰り返されることはありません。

一応関数として定義しているので、今回の質問には関係ないかと思い載せていませんでした。

querySelectorに未対応のブラウザについては、確認してみたいと思います

補足日時:2011/12/09 14:29
    • good
    • 1

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qselectタグに直接onChangeを書かないイベント取得方法

javascriptが余り詳しくないので困っています。

<select id="select1" name="select1">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
</select>

このようなselectの選択リストから値を変更した時にイベントを取得したいのです。
普通に考えると
<select id="select1" name="select1" onChange="xxx">
のようにonChangeを使えば簡単なのですが、
困ってしまうのがこのselectは自動生成されるものなので、
直接手を加えることができないのです。

なのでselect文には手を加えずに、値が変更されたときに
何か関数を呼び出すようなことをしたいのです。

無理ならしょうがないのですが、何か手があれば教えてください。
よろしくお願いします。

Aベストアンサー

イベント処理は後から追加する事もできます。
例えば、そのselectがページ内に一つ(目)であれば
<script type="text/javascript">
window.onload=function(){
Object = document.getElementsByTagName('select')[0];
//↑ページ内のselectの[0]番目を得る
Object.onchenge=function(){onchangeで呼び出したい関数()}
//↑onchangeイベントの処理を追加する
}
</script>

Qonchangeでイベントが発生しません

テキストフィールドに何かを入力した時に“onchange”でイベントを発生させたい場合ですが、今までに入力したデータが候補として表示され、その中から選択した場合はイベントが発生しません。
そのような場合でもイベントを発生させる方法はありますか?

Aベストアンサー

参考にどうぞ。
http://otd8.jbbs.livedoor.jp/javascript/bbs_tree?base=8398&range=1

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q