動的に生成されたオプションフォーム要素のinnerHTMLの変更方法

Question

オプションフォーム要素のinnerHTMLの設定に問題があります。 selectフィールドとoptionフィールドは正しく生成されますが、生成されるオプションの値が存在しないという問題があります。

<script src="jq.js"></script> 


<script> 
$(function(){ 
    var num = 0; 
    $('#gen_select').click(function(){ 
     var sel_opt = document.createElement('select'); 
     sel_opt.setAttribute('id','status' + num); 
     sel_opt.setAttribute('name', 'shi'); 



     document.getElementById('select_opt_div').appendChild(sel_opt); 

     var opt1 = document.createElement('option'); 
     opt.setAttribute('value', 'mr'); 
     opt.setAttribute('id','boy'); 

     var opt2 = document.createElement('option'); 
     opt2.setAttribute('value', 'ms'); 
     opt2.setAttribute('id','girl'); 

     document.getElementById('status' + num).appendChild(opt1); 
     document.getElementById('status' + num).appendChild(opt2); 
     document.getElementById('boy').innerHTML = 'MR'; 
     document.getElementById('girl').innerHTML = 'MS'; 
     num++; 
    }); 
}); 
</script> 

<input type="button" id="gen_select" value="generate select"/> 
<div id="select_opt_div"></div> 

私もこのような何かを試してみましたが、運：

opt2.innerHTML = 'MS'; 
opt.innerHTML = 'MR'; 

、事前に感謝を助けていないしてください！

Answer 1

あなたはとにかくjQueryのを使用している場合、あなたは（あなたが書いたものと同じ処理を行い）、これを試みることができる：それはDOM操作/トラバーサルに来るとき

var num = 0; 
$('#gen_select').click(function(){ 
    var sel_opt=$('<select>').attr({ 
     'id' : 'status' + num, 
     'name' : 'shi' 
    }).appendTo('#select_opt_div'); 

    var opt1=$('<option>').attr({ 
     'value' : 'mr', 
     'id' : 'boy' 
    }).text('MR').appendTo(sel_opt); 

    var opt2=$('<option>').attr({ 
     'value' : 'ms', 
     'id' : 'girl' 
    }).text('MS').appendTo(sel_opt); 

    num++; 
}); 

jsFiddle Demo

jQueryのは、あなたの親友です。

Answer 2

オプションの選択を記入するのに好ましいと最大限互換の方法は、テキストとオプションの値、およびselect要素のoptions配列様なものを（それは本当に配列ではありません）受け付けnew Optionコンストラクタ経由で：

​​

これは、DOM要素を直接操作するよりも信頼性の高いクロスブラウザです。

アレイのようなものをlength（配列の場合のように）に設定して切り捨てることもできます。それから、すべてのオプションをクリアするには：

options.length = 0; 

あなたが最後にオプションを追加するためのoptions[options.length] = ...構文が気に入らない場合は、代わりにoptions.add(...);を使用することができます。限り、私はそれがクロスブラウザと同様に互換性があると言うことができます。それはaddであり、pushではないことに注意してください。これは実際の配列ではない方法の1つです。 :-)

---

更新：

私はあなたのオプションにid値を入れている気づきます。それはかなり珍しいですが、あなたはそれを行うことができます。あなたがnew Optionを経由して、あなたのオプションを作成した後、ちょうどそのidプロパティにidを割り当てる：<option>内のテキストは、テキストプロパティによってアクセスすることができる

option = new Option("text of option", "value of option"); 
option.id = "unique_ID_of_option"; 

Answer 3

opt.text='MR'; 

も注意してください。 あなたが設定しますoptというオブジェクトの属性ですが、オブジェクトはopt1です（optは定義されていないため、エラーで実行され、スクリプトは実行を停止します）。

var opt1 = document.createElement（ 'option'）;
opt .setAttribute（ 'value'、 'mr'）;
opt .setAttribute（ 'id'、 'boy'）;

Answer 4

あなたはjQueryのを使用している場合は、この

opt2.val('ms'); 

のような値を設定することができますかあなたは純粋なJavaScriptを記述することができ、この

$('#SelectID').append('<option value="Mr">Boy</option>'); 

Answer 5

のようなあなたのselectタグ使用してjQueryのにoptionを追加しよう

opt2.value = 'ms'; 
opt2.text = 'MS'; 

要素のjs値が異なるentから属性。