Click here to Skip to main content
13,148,364 members (57,308 online)
Rate this:
Please Sign up or sign in to vote.
See more:
Suppose we have two dropdown
dropdown1 for country and dropdown2 for state

i want to show the states in dropdown2 on dropdown1 change event(when we select any country then show states of particular country in dropdown2 from database)?
Posted 21-Sep-12 1:35am
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

Hi Again,
Here's an Example... A Complete Test Page with this feature
File: index.html

<!doctype html>
 <meta charset="utf-8">
 <title>Representation of AJAX</title>
 <script type="text/javascript">
   function update(str)
      var xmlhttp;
      if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
      {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      xmlhttp.onreadystatechange = function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
          document.getElementById("data").innerHTML = xmlhttp.responseText;
      }"GET","demo.php?opt="+str, true);
  <select id="optionA" onchange="update(this.value)">
    <option value="0">Select...</option>
    <option value="1">Option1</option>
    <option value="2">Option2</option>
  <select id="data">
    <option>Select an Option...</option>

File: demo.php 

  $opt = $_GET['opt'];
    case 0:
      echo '
            <option>Select an Option...</option>
    case 1:
      echo '
            <option value="opt1_1">Option1_Test1</option>
            <option value="opt1_2">Option1_Test2</option>
            <option value="opt1_3">Option1_Test3</option>
    case 2:
      echo '
            <option value="opt2_1">Option2_Test1</option>
            <option value="opt2_2">Option2_Test2</option>
            <option value="opt2_3">Option2_Test3</option>

Hope that this example will help.

With Regards
Tushar Srivastava
Mr.Venus 17-Dec-13 4:52am
Thank you very much Tushar sriv . I am a Newbie in coding :( So I cannot understand ajax,php codings.. anyway Thanks for your help. I have tested this on my computer. It worked. I am very happy now. Kindly give me some learning resources for programming
Tushar Sriv 17-Dec-13 7:03am
It is a pleasure to help peoples :) I am always here to help. Well for learning resources on internet, I would like to tell you two things. If you retain or learn better by audio visual source then you can go for video tutorials on youtube or net.tutsplus but if you are more comfortable in reading and understanding than no one is better friend's of yours than your favorite books :) Enjoy learning and always challange yourself to do big. Its how I have learned :) Best of Luck
Mr.Venus 18-Dec-13 1:22am
Thank you very much dude :) And also I have one doubt, U have used switch case in php from above example. Is it possible to use that by using arrays? If yes ? just give me a example of full code. Thank u once again
Tushar Sriv 18-Dec-13 5:07am
Actually it is possible but I am sure the code will look seriously clumsy using that technique 'cause then you have to build an array containing the code as element and then you will be using the index received via a GET request to echo that element. It is better to stick to this solution :) BTW, you can try doing what I have given you as a homework hint ;) Best of Luck Buddy!!!
Mr.Venus 20-Dec-13 0:20am
Tnank u :( I have tried that by using ararays. Still I was stuck with them. There are so many types of arrays. I dont know which one is efficient to above scenerio.Kindly give me the demo of php arrray for above scenerio
Tushar Sriv 21-Dec-13 22:52pm
There are three types of arrays in php. The most common is indexed array. In this array, all the elements are indexed like 0, 1, 2 ... The next type is enumerated array where instead of fixed index you can have variable number (enumeration) for each element. The last type is called associative array. In this type of array the key also is a string so it is easy to use. For example, an array's element represented by $arr['ID'] is more understandable than indexed array $arr[0]. Now in your case I guess that simple index array will solve the problem. Yet it's upto your logic for what you want to use. :)
Rate this: bad
Please Sign up or sign in to vote.

Solution 1

Well, My Friend, I am sure to help you since I have already replied to such a question previously too.
Let us see, how to do it...

1. First thing you need to think is, how will it be updating... ie. will the page reload or will it update automatically (obviously we will be going with the second one).

2. So, we are going with second one, we will need AJAX to do so.... Now it's your job to implement it. i can only give you idea.

3. The next thing is, make a page which can be called as processor, whenever a the name of country is submitted to this page, (you will be doing so using ajax) it will return you will a list of name of states. See the codes below..(sorry, it is in php but I am sure you can implement it for ASP as well)
foreach($array as $statename)
 echo "<option>".$statename."</option>";

This way the data is now recieved by you... Now paste this data inside the dropdown list using ajax as..
document.getElementByID("statelist") = xmlhttp.responseText;

Now here will be your codes inside the form:
<div id="statelist">
<option>This will be replaced by the state names</option>

Hope that this will help you...

Tushar Srivastava :-)
Mr.Venus 12-Dec-13 6:38am
Hey bro !! I need full source code of this. I was stuck with same issue. U already given solution.Though I need full source of html ,ajax,php. Thanks in advance
Tushar Sriv 16-Dec-13 8:04am
All right my friend..... I will be posting the reply soon.... sorry for the delay... I was busy with my exams :)
Tushar Sriv 16-Dec-13 8:50am
I have posted a similar example as an answer below... Check it... Hope that it will help :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web01 | 2.8.170924.2 | Last Updated 16 Dec 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100