消去テキストフィールドには、後に、私が選択リストにオプションを追加した後、テキストフィールドの内容を消去したいコンテンツ

Question

を提出し、ここにHTMLコードの例である：ここ

<select size="15" style="width:230px" style="text-align:right" id="theaterSelectControl"> 
          <option>111</option> 
          <option>222</option> 
          <option>333</option> 
         </select> 
         <p> 
         </p> 
         <form> 
          <input type="text" name="theater_name" value="" id="theater_name" style="width:225px"> 
         </form> 
       </td> 
      </tr> 
      <tr> 
       <td align="right"> 
        <input type="button" onclick="createOption()" value="add">  <!-- add to list button --> 
       </td> 
</tr> 

はjsのコードです：

function createOption() 
{ 
    var theaterSelectControl = document.getElementById('theaterSelectControl'); 
    var currentText = document.getElementById('theater_name').value; 
    var objOption = document.createElement("option"); 
    objOption.text = currentText ; 
    objOption.value = currentText ; 
    theaterSelectControl.options.add(objOption); 
    document.getElementById('add_option').onclick = createOption; 
     resetField(); 
} 
function resetField() 
{ 
    document.getElementById('theater_name').value = ""; 
} 

何午前私は間違っている？

おかげ

Answer 1

あなたのイベントリスナーは、それが問題を引き起こしている、それが呼び出す関数内です。

document.getElementById('add_option').onclick = createOption; 

私は私があなただけのためのjQueryの例を生成することができ、通常のJSとの練習から外れそうだcreateOption();

Answer 2

外に置きます。それが役に立てば幸い！現在、そのコードで何が起こるか

LIVEデモ http://jsfiddle.net/Jp27y/

$('#addButton').click(function(){ 
    createOption(); 
}); 

function createOption(){ 
    $('#theaterSelectControl').append($("<option></option>").text($('#theater_name').val()));  
    $('#theater_name').val(""); 
}