Page 1 of 1

two dropdown box one is parent one is child

Posted: Sat Nov 30, 2013 10:15 am
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

Re: two dropdown box one is parent one is child

Posted: Sat Nov 30, 2013 11:02 am
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.

Re: two dropdown box one is parent one is child

Posted: Mon Dec 02, 2013 12:06 am
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>

Re: two dropdown box one is parent one is child

Posted: Mon Dec 02, 2013 5:57 am
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.

Re: two dropdown box one is parent one is child

Posted: Mon Dec 02, 2013 7:20 am
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>