/    Sign up×
Community /Pin to ProfileBookmark

Dynamic population of second list box based on the selection of first list box

<form name=”questionForm” method=”post” action=”listQuestions.lgs”>
<table bgcolor=”F8D8D8″ cellspacing=”2″ cellpadding=”2″ align=”center”
style=”margin-top: 100px”>

<tr>
<td>Topics:</td>
<td><select name=”topic” onChange=”loadCategories()”>
<c:forEach items=”${model.topics}” var=”topic”>
<option value=”<c:out value=”${topic.topicId}” />”>
<c:out value=”${topic.topicName}” /></option>
</c:forEach>
</select>
</td>
<td>Categories:</td>
<td><select name=”category” onChange=”loadQuestions()”>
<c:forEach items=”${model.categories}” var=”category”>
<option value=”<c:out value=”${category.categoryId}” />”>
<c:out value=”${category.categoryName}” /></option>
</c:forEach>
</select>
</td>
<tr>
<td><a
href=”addQuestion.lgs?categoryId=2<c:out value=”${category.categoryId}”/>”>Add New Question</a></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Questions under this Category:</td>
<td><c:if test=”${model.questions} == null”>
<c:out value=”no questions found” />
<br>
</c:if> <c:if test=”${model.questions} != null”>
<c:forEach items=”${model.questions}” var=”question”>
<table>
<tr>
<c:out value=”${question.questionDesc}” />
</tr>
</table>
</c:forEach>
</c:if></td>
</tr>
<tr>
<td colspan=”2″><input type=”submit” /></td>
</tr>

</table>
</form>

i have form like this here the issue is like:

Dynamic population of second list box based on the selection of first list box.
how can i do this one. one please tell me the solution.

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@FangMay 22.2007 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;select change 2nd select&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
var varieties=[
["varieties","granny smith","golden delicious","jonathan"],
["varieties","anjou","bartlett","conference"],
["varieties","valencia","pineapple","pera"]
];

function Box2(idx) {
var f=document.myform;
f.box2.options.length=null;
for(var i=0; i&lt;varieties[idx].length; i++) {
f.box2.options[i]=new Option(varieties[idx][i], i);
} <br/>
}

window.onload=function() {
Box2(0);
document.myform.box1.onchange=function(){Box2(this.selectedIndex);};
}
&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form name="myform" method="post" action="http://www.mysite.com/mysite"&gt;
&lt;fieldset&gt;&lt;legend&gt;fruit&lt;/legend&gt;
&lt;select name="box1"&gt;
&lt;option value="a"&gt;apple&lt;/option&gt;
&lt;option value="b"&gt;pear&lt;/option&gt;
&lt;option value="c"&gt;orange&lt;/option&gt;
&lt;/select&gt;
&lt;select name="box2"&gt;

&lt;/select&gt;
&lt;/fieldset&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
×

Success!

Help @Phani_Kanuri spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...