How to populate dependant select menus dynamically using jQuery, PHP and MySQL? -
i have searched quite bit on here topic. not find solution problem. i'd appreciate lot if me, school project working on.
i have database table ("main_table") , columns including "sector" , "sub_sector". want have 2 select boxes, first 1 load records database in "sector" column , second 1 load records database in "sub_sector" column depending on selection value of first select box. (for example: if select "plastics" on first select box, second select box should updated sub_sector values sector value equal "plastics").
i have managed load options values database first select box when click on selection, not load option second select box. can find codes below. did not put "sector_options.php" below, seems work fine.
index.html shown below:
<script> $(document).ready(function() { $('#filter_sector') .load('/php/sector_options.php'); //this part works fine - uploads options first select box $('#filter_sector').change(function() { $('#filter_subsector').load('/php/subsector_options.php?filter_sector=' + $("#filter_sector").val() } //this part not work - no options on second select box ); }); </script> <body> <div id="sectors"><p>sector:</p> <select id="filter_sector" name="select_sector" multiple="multiple" size="5"> </select> </div> <div id="subsectors"><p>sub sector:</p> <select id="filter_subsector" name="select_subsector" multiple="multiple" size="5"> <option value="" data-filter-type="" selected="selected"> -- make choice --</option> </select> </div> </body> </html> sector_options.php shown below:
<?php $link = mysqli_connect("*******", "*******","******","********") or die (mysql_error()); $query = "select sector main_table "; $result = mysqli_query($link, $query); while($row = mysqli_fetch_assoc($result)) { $options .= "<option value=\"".$row['sector']."\">".$row['sector']."</option>\n "; } echo $options; ?> subsector_options.php shown below:
<?php $link = mysqli_connect("********", "*****,"*******", "********") or die (mysql_error()); $sectors = $_request['filter_sector']; $query = "select sub_sector main_table sector='$sectors'"; $result = mysqli_query($link, $query); while($row = mysqli_fetch_assoc($result)) {$options .= "<option value=\"".$row['sub_sector']."\">".$row['sub_sector']."</option>\n "; } echo $options; ?>
for completeness, solutions were:
- check how ajax operations doing using browser network monitor
- load ajax fetcher scripts in browser tag - in many cases render quite happily there, allowing them more debugged
- ajax scripts return html injection should only return html, , not full html document.
Comments
Post a Comment