如何處理使用javascript動態創建的select元素的onchange事件？

我必須在html文件中動態創建幾個「select」元素。而且我還打算根據的值創建相同數量的「select」元素，前者創建了「select」元素。如何處理使用javascript動態創建的select元素的onchange事件？

因此，我將有一組「select」元素對。當第一個「select」元素的選定值發生更改時，第二個「select」元素將使用數據庫中的相應記錄刷新其選項。

我的問題是我無法接收到第一個「select」元素的正確值。每次調用onchange事件時，傳遞給onchange函數的值（在我的情況中，它被稱爲「fillSource（）」）是發生更改之前的值，而不是更改後的選定值。？解決這個問題

以下是我的javascript代碼：

<script> 

    var selectCount = 1; 
    var cats = #{dropCatsJson}; 
    var subcats = #{dropSourceJson}; 
    function addNewSource() { 

     var inputchange = document.createElement('select'); 
     inputchange.options[0] = new Option("pls Select", "0"); 
     inputchange.id="schange"; 

     var input1 = document.createElement('select'); 
     for(var i=0;i< cats.length;i++) { 
      var s = cats[i];       
      input1.options.add(new Option(s.Name, s.Id));    
     } 

     input1.id = 's' + selectCount; 

     //input1.onchange = new Function("alert(\"input1 changed\")");  
     input1.onchange = new Function("fillSource(" + input1.value + ")"); 

     document.getElementById('newSource').appendChild(input1); 
     document.getElementById('newSource').appendChild(inputchange); 
     selectCount = selectCount + 1; 
    } 

    function fillSource(input1) 
    { 

     var dropsub = document.getElementById("schange"); 
     dropsub.options.length = 0;//clear all the options. 
     for(var i=0;i< subcats.length;i++) { 
      var s = subcats[i]; 
      if(s.ParentId == input1.value) 
      {    
       dropsub.options.add(new Option(s.Name, s.Id)); 
      } 
     } 
    } 


</script>

=========================== ================================================== == 工作的最終代碼請注意，您應該新增onchange事件像這樣創建選擇元素：

input1.onchange = function(){fillsource(input1.value)};

這裏是我的test.html代碼：

<html> 

<script type="text/javascript"> 
var selectCount = 1; 
function addNewSearch() 
{ 
    //alert("add"); 
    var input1 = document.createElement('select'); 
    input1.options[0] = new Option("s1","1"); 
    input1.options[1] = new Option("s2","2"); 
    input1.name = 's' + selectCount; 
    input1.id = 's' + selectCount; 
    input1.onchange = function(){fillsource(input1.value)}; 
    document.body.appendChild(input1); 

    selectCount = selectCount +1; 
    //alert(selectCount); 
    var selcount = document.getElementById('selCount'); 
    selcount.textContent = selectCount; 
} 

function fillsource(ivalue) 
{ 
    alert(ivalue); 
} 

</script> 

<form name= "Search" id= "SearchForm" method= "post"> 

<select name= "SearchWhat" onchange = "setSearchField()"> 
<option value = "both"> Both Event and Task </option> 
<option value = "event"> Event </option> 
<option value = "task" > Task </option> 
</select> 

<label id="selCount"></label> 

<input type="submit" value= "submit" name = "btn_submit"/> 
<input type="button" name= "newsearch" value= "New Search" onClick= "addNewSearch()"> 
</html>

來源

2013-05-18 sparksustc

您能否提供dropCatsJson和dropSourceJson的一些測試數據？ – forseta

@Barmar已經解決了我的問題。不管怎麼說，還是要謝謝你。 – sparksustc

你捕捉你創建select元素的時間價值，進行硬編碼成功能onchange。您需要使用閉包：

input1.onchange = (function(input1) {fillsource(input1.value)})(input1);

來源

2013-05-18 16:07:24 Barmar

它的工作原理！非常感謝。 – sparksustc

你的回答激發了我，有解決這個問題的方法。首先，我傳遞第一個select元素的id屬性;然後我通過使用document.getElementById（）在我的函數fillsource（）中引用值，最後當我使用input1.value時，它可以工作。 'code' input1.onchange = new Function（「fillSource（\」s1 \「）」）; var inputselect = document.getElementById（input1）; 'code' – sparksustc

你可以這樣做，但是當你不需要時爲什麼要調用'getElementById（）'？ – Barmar

如何處理使用javascript動態創建的select元素的onchange事件？

回答

相關問題