linking dynamically added drop down using javascript

[bhuvan83]

hi every1
i m using jsp in jbuilder9 to create a website
i have 2 drop down button
a1 and b1
when i select a option in a1 the values of b1 comes
if i change the value of a1 then the value of b1 also changes.
then i have a button to dynamically add 2 similar drop downs
i click the button.
the drop down are added
a2 and b2
but the problem is
when i select some thing in a2 the value of b1 changes instead of b2.
i m not getting the solution.
plz if any 1 can help me out.
thanks in advance
regards
Bhuvan

[jwenting]

you quite obviously have an error in your javascript...

[bhuvan83]

but do u know the soln?

[Rhyan]

but do u know the soln?

It looks like your buttons A2 and B2 copy exactly the code you used to create a1 and b1. Use an iteration to change id and names of the dynamically added buttons, so that your b button become b2, not b1.

it should look something like this
var iteration = lastButtonNameNumber + 1;
var new_a_ButtonName = 'a' + iteration;
var new_b_ButtonName = 'b' + iteration;

And then access the new b-button value using something like
document.form.new_b_ButtonName.value = ....

Hope you can figure it out by yourself.

Good luck.

[bhuvan83]

dear rhyan
i m doing this
i m getting the name a2 and b2.
can u send me a small example where u r adding the drop down dynamically n when the 1st one is clicked the values of 2nd 1 comes.

[bhuvan83]

c if there r any error in th code n reply.<br>
this is the code i m using to create the drop boxes dynamically.<br>

var i=0;
var option=new Array();
function insRow(){
var d=document.getElementById("div");
d.innerHTML+="<select id='D"+i+"' class='input' onChange='getSh(this.selectedIndex)'><option>Select Here</option>"+
<%
rs=st.executeQuery("select * from productTab");
while(rs.next())
{
%>
"<option><%=rs.getString("productName")%></option>"+
<%}%>
"</select>"
d.innerHTML+="<select name='DD"+i+"' id='DD"+i+"' class='input'><option>Select Here</option></select>"
d.innerHTML+="<select name='DDD+i' id='DDD+i' class='input'><option>Select Here</option></select>"
d.innerHTML+="<input type=text name='T+i' id='T+i' class='input-time'><br>"

option +=["DD"+i];
option +=["D"+i];
i++;
}

function getSh(selectedcitygroup)
{
document.getElementById("DD+i").options.length=1
if(selectedcitygroup>0){
for(i=0;i<cities[selectedcitygroup].length; i++)
document.getElementById("DD+i").options[document.getElementById("DD+i").options.length]=new Option(cities[selectedcitygroup].split("|")[0], cities[selectedcitygroup].split("|")[1])
}
}