1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | <!DOCTYPE html><html><head> <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dyanamic Drop down combo box using Ajax Get jquery in array</title><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'><script type="text/javascript"> jQuery(document).ready(function(){ jQuery("select[name='country']").change(function(){ var optionValue = jQuery("select[name='country']").val(); jQuery.ajax({ type: "GET", url: "data.php", data: "country="+optionValue+"&status=1", beforeSend: function(){ jQuery("#ajaxLoader").show(); }, complete: function(){ jQuery("#ajaxLoader").hide(); }, success: function(response){ jQuery("#cityAjax").html(response); jQuery("#cityAjax").show(); } }); }); });</script></head><body> <h2>Dyanamic Drop down combo box using Ajax Get jquery ajax php in array</h2><h1>Countries:</h1><div class="box" style="position: absolute;top: 50%;left: 50%;"><select name="country"> <option value="">Please Select</option> <option value="1">Nepal</option> <option value="2">India</option> <option value="3">China</option> <option value="4">USA</option> <option value="5">UK</option> <option value="6">Philippines</option></select></div><div id="ajaxLoader" style="display:none"><img src="../img/loader.gif" alt="loading...">Loading...</div><div id="cityAjax" style="display:none"></div><style>body { margin: 0;font-family: Arial; padding: 0; background-color: #004882;}h1 { position: absolute; top: 35%; color:#fff; left:41%;}h2 { color:#fff;padding:10px;text-align:center;}.box { transform: translate(-50%, -50%);}.box select { background-color: #0563af; color: white; padding: 12px; width: 250px; border: none; font-size: 20px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); -webkit-appearance: button; appearance: button; outline: none;}.box::before { content: "\f13a"; font-family: FontAwesome; position: absolute; top: 0; right: 0; width: 20%; height: 100%; text-align: center; font-size: 28px; line-height: 45px; color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.1); pointer-events: none;}.box:hover::before { color: rgba(255, 255, 255, 0.6); background-color: rgba(255, 255, 255, 0.2);}.box select option { padding: 30px;}#ajaxLoader { position: absolute; top: 25%; color:#fff; left:41%;}.city { position: absolute; top: 55%; color:#fff; left:41%;}</style></body></html> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | //data.php<?php$country = $_GET['country'];if(!$country) { return false;}$cities = array( 1 => array('Kathmandu','Bhaktapur','Patan','Pokhara','Lumbini'), 2 => array('Delhi','Mumbai','Kolkata','Bangalore','Hyderabad','Pune','Chennai','Jaipur','Goa'), 3 => array('Beijing','Chengdu','Lhasa','Macau','Shanghai'), 4 => array('Los Angeles','New York','Dallas','Boston','Seattle','Washington','Las Vegas'), 5 => array('Birmingham','Bradford','Cambridge','Derby','Lincoln','Liverpool','Manchester'), 6 => array('Olongapo City','Angeles City','Manila City','Davao City','Cebu City','Makati City','Pasay City') );$currentCities = $cities[$country];?><h1 class="city">City:</h1><div class="box" style="position: absolute;top: 70%;left: 50%;"><select name="city"> <option value="">Please Select</option> <?php foreach($currentCities as $city) { ?> <option value="<?php echo $city; ?>"><?php echo $city; ?></option> <?php } ?></select> </div> |
