javascript - Dropdown menu dynamically populates a second dropdown -
i had code first dropdown menu dynamically populates second dropdown menu using php , jquery.
the code used
$('#first_choice').change(...) and inside function getter.php file loaded data database second menu using first choice value, so:
$first_choice=$("#second-choice").load( "getter.php?choice=" + $("#first-choice").val() ); this php page json encoded. inside change function there .get() function having url of select menu php page, function(data) append second menu's's options , format "json" last parameter. change function called once change second menu when first menu clicked. remember .ajax parameter false.
example ajax second dropdown menu change when first dropdown menu change:
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="js/jquery-1.9.1.min.js"></script> <script> $(function(){ $('#first_choice').change(function(){ $.ajax({ url: "getter.php?choice=" + $(this).val() }).done(function(data){ data = json.parse(data); var html = ''; for(i=0;i<data.length;++i){ html += '<option value="'+data[i]+'">'+data[i]+'</option>'; } $('#second-choice').html(html); }); }); }); </script> <style> {padding:0;margin:0;} </style> </head> <body> <select id="first_choice"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select id="second-choice"> </select> </body> </html> code in processing file "getter.php" :
<?php $out = array(); if(isset($_get['choice'])) { for($i=100;$i<10000000;$i*=10) { $out[] = $_get['choice']*$i; } } echo json_encode($out); ?>
Comments
Post a Comment