みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

scriptによる読み込みのselect表示

<script language="javascript" type="text/javascript" src=""></script>
で外部ファイルからHTMLを読み込ませ表示させたいのですがなぜかselectが上手く表示されません。

上手く説明できませんが
<script language="javascript" type="text/javascript" src="http://www.○○.com/××.php"></script>
を貼り付けた部分に

http://www.○○.com/に用意した××.phpから
<form action="" method="post">
<input type="radio" name="test1" value="1" />r1
<input type="radio" name="test1" value="2" />r2

<input type="checxbox" name="test2" value="1" />c1
<input type="ceckbox" name="test2" value="2" />c2

<select name="test3">
<option value="1">s1</option>
<option value="2">s2</option>
</select>

</form>

このようなHTMLを吐き出して表示させたいのですが、redioやchekboxは問題ないのにselectが上手く表示されません。
全くプルダウンが出来ずoption部分を見る事が出来ない状態です。

上記のような方法で表示させる事は無理なのでしょうか?
それとも何か対応策はあるのでしょうか?
どなたかお教え願えませんでしょうか。

投稿日時 - 2009-04-20 20:03:42

QNo.4895434

すぐに回答ほしいです

質問者が選んだベストアンサー

回答番号:No.1です。先のやつはIEではだめですね。
IEではSELECT OPTIONのDOMの取り扱いが違うみたいです。
下のようにしなければならないみたいです。(面倒くさい)

var objSelect = document.createElement('select');
var objOption=[];
objOption[0] = document.createElement('option');
objOption[0].value ="1";
objOption[0].text ="s1";
try{
objSelect.add( objOption[0], null ); // FireFox
}catch(e){
objSelect.add( objOption[0]); // IE
}
objOption[1] = document.createElement('option');
objOption[1].value ="2";
objOption[1].text ="s2";
try{
objSelect.add( objOption[1], null ); // FireFox
}catch(e){
objSelect.add( objOption[1]); // IE
}
objForm.appendChild(objSelect);

投稿日時 - 2009-04-21 11:43:26

お礼

いろいろありがとうございました。
何とか試行錯誤して上手く行きそうです。

投稿日時 - 2009-04-21 15:24:43

ANo.3

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(3)

ANo.2

回答番号:No.1です。
innerHTMLでは、SELECTのOPTIONが設定できませんでした。ごめんなさい
以下のようにすればだいじょうぶでした。
php側 xx.php
<?php
header("Content-type: application/x-javascript\n\n");
print <<<EOD
/* java script */
window.onload = function () {
var element = document.createElement('div');
element.id = "outform";
element.innerHTML = "<form action=\"\" method=\"post\"><br />";
element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"1\" />r1<br />";
element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"2\" />r2<br />";
element.innerHTML += "<input type=\"checxbox\" name=\"test2\" value=\"1\" />c1<br />";
element.innerHTML += "<input type=\"ceckbox\" name=\"test2\" value=\"2\" />c2<br />";
element.innerHTML += "</form>";
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(element);
var objForm = document.getElementById("outform");
var objSelect = document.createElement('select');
var objOption=[];
objOption[0] = document.createElement('option');
objOption[0].value ="1";
objOption[0].text ="s1";
objSelect.appendChild(objOption[0]);
objOption[1] = document.createElement('option');
objOption[1].value ="2";
objOption[1].text ="s2";
objSelect.appendChild(objOption[1]);
objForm.appendChild(objSelect);
}
EOD;
?>

本体側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>domtest</title>
<script type="text/javascript" charset="utf-8" src="http://www.○○.com/XX.php">
</head>
<body>
</body>
</html>

投稿日時 - 2009-04-21 11:19:03

お礼

yyr446さん 
ありがとうございます。
No1~3を参考にさせていただきTRYしてみます。

投稿日時 - 2009-04-21 12:50:44

ANo.1

javascriptをphpで出力している理由がよくわかりませんが、(フォームの内容を動的に変えたいのでしょうか?)、phpで下のようなjavascriptを生成すればどうでしょうか、innerHTMLを使った簡易方法ですが...
<script type="text/javascript" charset="utf-8">
<!--
/* java script */
window.onload = function () {
var element = document.createElement('div');
element.id = "outform";
element.innerHTML = "<form action=\"\" method=\"post\"><br />";
element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"1\" />r1<br />";
element.innerHTML += "<input type=\"radio\" name=\"test1\" value=\"2\" />r2<br />";
element.innerHTML += "<input type=\"checxbox\" name=\"test2\" value=\"1\" />c1<br />";
element.innerHTML += "<input type=\"ceckbox\" name=\"test2\" value=\"2\" />c2<br />";
element.innerHTML += "<select name=\"test3\"><option value=\"1\">s1<br />";
element.innerHTML += "</option><option value=\"2\">s2<br />";
element.innerHTML += "</option></select></form>";
var objBody = document.getElementsByTagName("body").item(0);
objBody.appendChild(element);
}
// -->
</script>

投稿日時 - 2009-04-21 09:55:18

あなたにオススメの質問