あなたの質問は十分に定義されておらず、明確な目標を持つことは常に役立ちます.
1.) 同じ値を持つ id="same_as" name="same_as" を使用することが重要であるという点を完全に超えているとは言えませんが、この方法を強くお勧めします (古い Internet Explorer のバグ)。label 要素 (clicky clicky) をうまく活用すると、ユーザーがクリックしてフォーカス (要素、チェックボックス、テキストなど) を指定できる範囲が広がります。
2.) in 演算子を使用して、利用可能なツールを見つけたいと思うでしょう...
XHTML
<textarea id="dom_methods"></textarea>
JavaScript
for (i in document.getElementById('select_element_id')
{
document.getElementById('methods').value = document.getElementById('methods').value+'\n'+i;
}
これにより、選択要素の例に関連付けられているさまざまなメソッド/関数/オブジェクト/などを発見できます。各オブジェクトには独自の子がある場合があることに注意してください。できるよ...
for (i in window) {}
for (i in window.document) {}
for (i in document.getElementById('select_element_id')) {}
ここにある Mozilla Developer Network などの優れたリソース...
https://developer.mozilla.org/en/
私の絶対的な最大のアドバイスは、フレームワークを使用しないことです。実際の言語の学習からすぐに逸脱し、気付かない高レベルの問題をすぐに受け継いでしまうからです。JavaScript の投稿にドル記号 ($) を投稿する人は、通常、フレームワーク関連の回答を明示的に要求しない限り、あなたの質問に回答していないことを示しています。
質問を修正して私の回答に返信する場合は、私の回答を追加して、あなたが達成しようとしていることにより直接適用できるようにいたします。
パート2
要素を作成する場合は、createElement メソッドを使用する必要があります...
要素を作成し、必要な値を指定します...
var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);
重要！JavaScript には QUIET エラーがあり、それらについて投稿したり、誰かがさりげなく指摘したりする前に、何日も戦わなければなりません。そのため、変数に短い名前を使用することには特に注意してください (たとえば、var in = ''; は使用しないでください。"in" は演算子であり、サイレント エラーが発生するためです)。
この新しい要素をページに配置するための有効な選択肢がいくつかあります...
1.) を使用すると、親コンテナーの最後appendChildに要素が配置されます...
document.getElementById('form_id').appendChild(d);
フォーム要素の直接の子としてフィールドセット (通常は 1 つで十分です) を使用する必要があります...
<form action="" method="post">
<fieldset>
<!--everything form related goes here -->
</fieldset>
</form>
...その場合、次のことを行うことができます(例に慣れ、実際に動作することを確認するのに役立ちます)...
document.getElementById('form_id').getElementsByTagName('fieldset')[0].appendChild(d);
[0] に注意してください。これは最初のfieldset 要素を指します。2 つあり、新しい要素を 2 番目の要素に追加したい場合は、[1] (3 番目の要素には [2] など) を使用します。また、ページに単一のフォームと単一のフィールドセットしか含まれていない場合は、最初の部分を削除できます (物事がどのように構築されているかを確認できるようにするためです)...
document.getElementsByTagName('fieldset')[0].appendChild(d);
2.) 通常はinsertBefore...
var f = document.getElementById('form_id');
var element_parent = f.getElementsByTagName('fieldset')[0];
var element_before = f.getElementsByTagName('select')[0];
parent_element.insertBefore(d,element_before);
ここにもう少し情報があります...
https://developer.mozilla.org/en/insertBefore
いかなる理由があっても、決して INNERHTML を使用しないでください!!! 怠惰なプログラマーは常にそれを使用しており、DOM を正しく登録していないため、その独自の Microsoft JScript メソッドに関連付けられた要素は、それらを操作しようとしても表示されません。この理由だけでも、jQuery などのフレームワークの使用は避けるべきです。簡単に仕事を終わらせることはできません。簡単に仕事をやり遂げたように見せて、1回の給料を稼ぐのに十分な時間をかけます。そうしないと、ある日、その特定の領域のすべてのコードを書き直すことになります（作業を覚えてからずっと後）あなたがやろうとしていたこと）あなたは傷ついた世界にいるでしょう.
パート3
JavaScript は EVENT ドリブン言語であり、イベントは DOM ベースです。DOM と JavaScript は非常に密接に結びついている別のものです。
DOM イベントの詳細については、こちらをご覧ください...
https://developer.mozilla.org/en/DOM/event
...そして、ここにDOMイベントの良いリストがあります...
http://en.wikipedia.org/wiki/DOM_events#HTML_events
コードを活用するには、目的に最も適したイベントを決定する必要があります。フォームが送信されたときにこれを実行しようとしていますか? それはonsubmitになります。ページの読み込み時にこれを実行しようとしていますか? それはオンロードになります。
通常、onload イベントは 1 回しか実行できませんが、イベントは際限なく再利用できます。
私のサイトにアクセスして JavaScript コードを見ると、3 つのことに気付くでしょう...
1.) 関数だけの index.js ファイル。
2.) 限られた数のグローバル変数 (関数の外部で定義された変数) と匿名の onload 関数を含む onload.js ファイル。
複数のことを実行したい場合 (複数の無関係な関数を実行する場合など)、onload イベントは 1 回しか実行できないためanonymous function、名前のない単純な関数である を使用できます...
window.onload = function()
{
my_func1();
my_func2();
my_func3();
}
<head>要素ではなく、常にスクリプト要素を要素内に保持する必要があることに注意してください。<body>そうしないと、不適切なコーディング プラクティスへの道をたどることになります。
したがって、スタンドアロンのテスト ファイルを作成すると、次のようになります...
example.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Test Page</title>
<script type="application/javascript">
//<![CDATA[
function form_days()
{
var d = document.getElementById('days');
var input_day = document.createElement('input');
input_day.setAttribute('id','days');
input_day.setAttribute('name','days');
input_day.setAttribute('type','text');
input_day.setAttribute('value',d.options[d.selectedIndex].text);
d.parentNode.insertBefore(input_day,d.nextSibling);
}
function get_methods(o)
{
var m = document.getElementById('dom_methods');
var dom_list = new Array();
for (i in o)
{
dom_list.push(i);
}
dom_list.sort();
for (var i=0; i<dom_list.length; i++)
{
m.value = m.value+dom_list[i]+'\n';
}
}
window.onload = function()
{
form_days();
get_methods(document.getElementById('days').options[document.getElementById('days').selectedIndex]);
}
//]]>
</script>
<style type="text/css">
label {border: #000 dotted 1px; padding: 0px 2px 0px 2px;}
label:hover {border: #000 solid 1px;}
textarea {height: 500px; width: 400px;}
</style>
</head>
<body>
<form action="http://www.test.com/school" method="post">
<fieldset>
<label for="days">Day:</label>
<select id="days" name="days">
<option value="2">Monday</option>
<option value="1">Tuesday</option>
<option value="3">Wednesday</option>
<option value="4">Thursday</option>
<option value="5">Friday</option>
<option value="6">Saturday</option>
<option value="7">Sunday</option>
</select>
<div><textarea id="dom_methods"></textarea></div>
<div><input type="submit" value="submit" id="submitday" /></div>
</fieldset>
</form>
</body>
</html>
これをコピーしてファイルに貼り付け、example.xhtml という名前を付けます。それはすべて機能し、テストされ、最高水準で動作します。Internet Explorer 8 以前は、XHTML (application/xhtml+xml) に対応していないか、JavaScript の正しいメディア タイプ/MIME (application/javascript) を理解できないことに注意してください。有効ではありませんが、動作します。