<html> <head> <title>example</title> <script type="text/javascript"></script> <script src="../js/jquery-1.9.1.js"></script> <script> jQuery(document).ready(function() { jQuery.ajax( { type: 'GET', url: 'category.php', dataType: 'JSON', success:function(data) { for(i=0;i<jquery(data).length;i++)> { $('#parentCategory').append('<option value = '+ data[i].category_name+'>' + data[i].category_name + '</option>'); } } }); }); </script> <script> jQuery(document).ready(function() { jQuery('#parentCategory').change(function() { jQuery("#subCategory").load("subcategory.php?choice="+jQuery("#parentCategory").val()); }); }); </script> <script> function showDiv() { var SubCategory = document.getElementById('subCategory'); for (i = 0; i < SubCategory.options.length; i++) { document.getElementById('sidebarleft').innerHTML += SubCategory.options[i].value + "<br />"; } } </script> <script> jQuery(document).ready(function() { jQuery('#sidebar-left').click(function() { jQuery.ajax({ type: 'GET', url: 'sampleapi.php, dataType: 'JSON', success: function() { alert("success"); }, error: function(xhr, textStatus, errorThrown) { alert('An error occurred! ' + ( errorThrown ? errorThrown :xhr.status)); } }); }); }); </script> <style> #header{ background-color:#c3dfef; } #footer { background-color:#ccecd8; margin:5px; display: block; clear: both; } #sidebar-left { background-color:#D0D0D0 ; float: left; width:250px; height:530px; } #content { background-color:#ccdff0; height:530px; } div{ padding:10px; border:solid 1px black; } .button2:hover { text-decoration: none; background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); } </style> </head> <body> <form id="form1"> <div id="header"> <select id="parentCategory" value="parentCategory" class="button2" name="category"> <option selected="selected" name="category" value="selected">--Select Category--</option> </select> <select id="subCategory" class="button2" name="subCategory"> <option selected="selected" name="subCategory" value="selected">--Select subCategory--</option> </select> <input type="button" name="answer" class="button2" id="submit" value="Go" onclick="showDiv()"/> </div> <div id="sidebar-left"> <a id="sidebarleft" class="sidebar" href=""> </a> </div> <div id="content">content</div> <div id="footer">footer</div> </form> </body> </html>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)