php - Select value from drop down list and second drop down list auto changed -
i have 1 table in database called company , inside company table there 3 columns name id,company_name , location. have 2 drop down list. first drop down list displaying company name , according company name location change in second drop down list. did code in second drop down getting location name.
<?php //$comp=$_post['company']; $servername = "localhost"; $username = "root"; $password = ""; $dbname = "demo_db"; //open connection mysql db $connection = mysqli_connect($servername,$username,$password,$dbname) or die("error " . mysqli_error($connection)); //fetch table rows mysql db $sql = "select * company";// displaying company name in first drop down list $result = mysqli_query($connection, $sql) or die("error in selecting " . mysqli_error($connection)); if (isset($_post['company'])) { $name=$_post['company']; $sql = "select * company company_name=$name"; } $result_loc = mysqli_query($connection, $sql) or die("error in selecting " . mysqli_error($connection)); //close db connection mysqli_close($connection); ?> <!doctype html> <html> <head> <title></title> </head> <body> <select onchange='this.form.submit();' name="company"> <option value="select location1" disabled selected>select company</option> <?php while($row = mysqli_fetch_array($result)):;?> <option value="<?php echo $row[1];?>"><?php echo $row[1];?></option> <?php endwhile;?> </select> <select> <option value="" disabled selected>select location</option> <?php while($row = mysqli_fetch_array($result_loc)):;?> <option value="<?php echo $row[2];?>"><?php echo $row[2];?></option> <?php endwhile;?> </select> </body> </html>
to aid in chaining select menus using ajax following might prove useful - should able modify suit db structure , naming conventions. can run "as-is" see results - hope prove useful.
<?php if( $_server['request_method']=='post' && isset( $_post['action'], $_post['id'] ) ){ $action=filter_input( input_post, 'id', filter_sanitize_string ); $id=filter_input( input_post, 'id', filter_sanitize_number_int ); if( $action && $id && !is_nan( $id ) ){ $sql='select * table id=?'; /* etc ~ generic sql example ! */ /* query db*/ /* process recordset , build menu data */ /* demo response sent aajx callback in reality dynamically generated results db query above. */ for( $i=0; $i < 10; $i++ )echo "<option value='location-$id-$i'>location-$id-$i"; } exit(); } ?> <!doctype html> <html> <head> <title>dependent / chained select menus</title> <script type='text/javascript' charset='utf-8'> /* basic ajax function */ function ajax(m,u,p,c,o){ /* m=method, u=url, p=params, c=callback, o=options */ var xhr=new xmlhttprequest(); xhr.onreadystatechange=function(){ if( xhr.readystate==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getallresponseheaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.tolowercase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.touppercase(), u, true ); xhr.setrequestheader('content-type','application/x-www-form-urlencoded'); xhr.send( p ); } /* callback function populate second menu */ function createmenu(r,o,h){ /* r=response o=options ( sent ajax function ) h=response headers */ o.menu.innerhtml=r; } function bindevents(){ /* references 2 dropdown menus */ var oselcompany=document.queryselectorall('select[name="company"]')[0]; var osellocation=document.queryselectorall('select[name="locations"]')[0]; /* assign `onchange` event listener */ oselcompany.onchange=function(e){ var method='post'; var url=location.href; /* parameters send php script */ var params={ 'action':'getmenu', 'id':this.options[ this.options.selectedindex ].value }; /* options pass ajax callback */ var opts={ menu:osellocation }; /* make ajax request */ ajax.call( this, method, url, params, createmenu, opts ); }.bind( oselcompany ); } document.addeventlistener( 'domcontentloaded', bindevents,false ); </script> <style type='text/css' charset='utf-8'> select {padding:1rem;width:300px;} </style> </head> <body> <form method='post'> <select name='company'> <option value=1>one <option value=2>two <option value=3>three <option value=4>four <option value=5>five </select> <select name='locations'></select> </form> </body> </html> 
Comments
Post a Comment