根据另一个下拉菜单下拉菜单项(Drop down menu items based on another drop down menu)

根据另一个下拉菜单下拉菜单项(Drop down menu items based on another drop down menu)

我是PHP新手，我试图根据另一个下拉菜单值填充下拉菜单

//Here's the first drop down menu <select name="comp_type" class="form-control" > <option disabled selected value>Select</option> <option value="Controller" >Controller</option> <option value="Processor">Processor</option> <option value="Module">Module</option> <option value="Board">Boards</option> <option value="Glue">Glue</option> <option value="Diod">Diod</option> <option value="Adapter">Adapter</option> <option value="Meter">Meter</option> <option value="Wire">Wires</option> </select> //Second drop down menu <select name="component_name"> //Here component names should be displayed </select>

第一个下拉菜单中的每个选项都对应于MySQL数据库中的不同表格。

如果我在第一个下拉菜单中选择任何选项，则需要在适当的表格中提取组件名称，并在第二个下拉菜单中显示名称。

I'm new to PHP and I'm trying to populate a drop down menu based on another drop down menu value

//Here's the first drop down menu <select name="comp_type" class="form-control" > <option disabled selected value>Select</option> <option value="Controller" >Controller</option> <option value="Processor">Processor</option> <option value="Module">Module</option> <option value="Board">Boards</option> <option value="Glue">Glue</option> <option value="Diod">Diod</option> <option value="Adapter">Adapter</option> <option value="Meter">Meter</option> <option value="Wire">Wires</option> </select> //Second drop down menu <select name="component_name"> //Here component names should be displayed </select>

Every option in first drop down menu corresponds to different tables in a MySQL database.

If I select any option in first drop down menu, it needs to fetch the component names in the appropriate table and display the names in second drop down menu.

最满意答案

查看调用AJAX并在div中显示数据： https ： //api.jquery.com/jquery.post/

<script> $(document).ready(function() { $('.form-control').change(function(){ var Value = $(this).val(); if(Value != null){ jQuery.ajax({ type: 'POST', url: "getTableData.php?table="+Value, success: function(data){ $('#resultDiv').html(data); } }); } }) }) </script> <select name="comp_type" class="form-control" > <option disabled selected value>Select</option> <option value="Controller" >Controller</option> <option value="Processor">Processor</option> <option value="Module">Module</option> <option value="Board">Boards</option> <option value="Glue">Glue</option> <option value="Diod">Diod</option> <option value="Adapter">Adapter</option> <option value="Meter">Meter</option> <option value="Wire">Wires</option> </select> <div id="resultDiv"> </div>

Check out calling AJAX and displaying data in a div: https://api.jquery.com/jquery.post/

<script> $(document).ready(function() { $('.form-control').change(function(){ var Value = $(this).val(); if(Value != null){ jQuery.ajax({ type: 'POST', url: "getTableData.php?table="+Value, success: function(data){ $('#resultDiv').html(data); } }); } }) }) </script> <select name="comp_type" class="form-control" > <option disabled selected value>Select</option> <option value="Controller" >Controller</option> <option value="Processor">Processor</option> <option value="Module">Module</option> <option value="Board">Boards</option> <option value="Glue">Glue</option> <option value="Diod">Diod</option> <option value="Adapter">Adapter</option> <option value="Meter">Meter</option> <option value="Wire">Wires</option> </select> <div id="resultDiv"> </div>