How to process onchange events for select elements which is dynamically created using javascript? -
i have create few "select" elements in html file dynamically. , intend create same amount "select" elements according value of former created "select" elements.
thus have set of "select" elements pair. when first "select" element's selected value changed, second "select" elements refresh options using according records in database.
my problem can't receive correct value of first "select" element. everytime when onchange event called, value passed on onchange function( in case, it's called "fillsource()" value before change happened instead of changed selected value.
do know how solve problem?
the following javascript code:
<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 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> =============================================================================== final code works. please notice should add onchange event newly created select elements this:
input1.onchange = function(){fillsource(input1.value)}; here test.html code:
<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 , 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>
you're capturing value @ time create select element, , hard-coding onchange function. need use closure:
input1.onchange = (function(input1) {fillsource(input1.value)})(input1);
Comments
Post a Comment