two dropdown box one is parent one is child

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
Lphp
Forum Commoner
Posts: 74
Joined: Sun Jun 26, 2011 9:56 pm

two dropdown box one is parent one is child

Post by Lphp »

I wand two drop down box , parent one is state , the child one is city , when state get select the relate city get display. how to do it :x
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: two dropdown box one is parent one is child

Post by Celauran »

Attach a listener to the state dropdown, get its value, fire an AJAX request to get a list of cities for the state in question, create the second list from the results.
Lphp
Forum Commoner
Posts: 74
Joined: Sun Jun 26, 2011 9:56 pm

Re: two dropdown box one is parent one is child

Post by Lphp »

I have the following now

Code: Select all

 :? 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
</script>
<script>
$(document).ready(function(){
    $('#bonus').change(function() {
    alert($("#bonus option:selected").text());
  });  
});
</script>
</head>

<body>
<select id="bonus">
<option value="1">-$5000</option>
<option value="2">-$2500</option>
<option value="3">$0</option>
<option value="4">$1</option>
<option value="5">We really appreciate your work</option>
</select>
</body>
</html>
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: two dropdown box one is parent one is child

Post by Celauran »

Looks like you've got the right idea. Now you just need to replace the alert with an AJAX call to get the data for the second dropdown.
Lphp
Forum Commoner
Posts: 74
Joined: Sun Jun 26, 2011 9:56 pm

Re: two dropdown box one is parent one is child

Post by Lphp »

I have the following code, but is not work

Code: Select all

if(country != '')  
     {
      $.ajax
      ({
         type: "POST",
         url: "test/useraccount.php",
         data: "p="+ country,
         success: function(option)
         {
           $("#institution").html(option);
         }
      });
     }
     else
     {
       $("#institution").html("<option value=''>-- No category selected --</option>");
     }

 <div>
            <table width="100%"> 
                <tr> 
                    <td class="programTitleLeft">Create account</td>
                    <td class="programTitleRight">hello </td> 
                </tr> 
            </table> 
           
            
                <table align=center width=50% border=0 cellpadding=2 cellspacing=0>
                    <tr><td><b>E-mail address : <b></td>
                        <td><input type=text name="email" value="" size=40 maxlength=40>
                    </tr>
                    <tr><td><b>Country:</b></td>
                            <td><select  id="country" >
                                <option>---</option>
                                </select>
                            </td>
                    </tr>
                    <tr><td><b>Institution:</b></td>
                        <td><select  id="institution">
                            <option >----</option> 
                             </select></td>
                    </tr>
                    
                    <tr><td><b>Counselor&rsquo;s Name : <b></td>
                        <td><input type=text name="name"  value="" size=40 maxlength=40>
                    </tr>

             </table>  

            </form>
            </div>
Post Reply