PHP MYSQL动态选择框

我正在尝试创建一个搜索框,其中从“ Box1”中选择的选项将填充可用于“ Box2”的选项.这两个盒子的选项都从我的MysqL 数据库中给出.我的问题是,我不知道如何在不刷新页面的情况下基于第一个查询执行查询,这将是乏味且烦人的.

<form role="form" action="search.PHP" method="GET">
          <div class="col-md-3">
              <select class="form-control">
                  <?PHP
                  $result = MysqLi_query($con,"SELECT `name` FROM school");
                  while($row = MysqLi_fetch_array($result)) {
                    echo '<option name="'.$row['name'].'">'.$row['name'].' School</option>';
                  }

                  ?>
              </select>
          </div>
          <div class="col-md-3">
              <select class="form-control">
                  <?PHP
                  $result = MysqLi_query($con,"SELECT * FROM products");
                  while($row = MysqLi_fetch_array($result)) {
                    echo '<option name="'.$row['product'].'">'.$row['product'].'</option>';
                  }
                  MysqLi_close($con);
                  ?>
              </select>
          </div>
          <button type="submit" class="btn btn-info">Search</button>
    </form>

我认为查询会像这样. AJAX可能是解决此问题的方法,但是我不确定如何使用AJAX来执行此查询而无需刷新.

SELECT `product` FROM products WHERE `school` = [SCHOOL NAME FROM Box 1]

提前致谢！

解决方法:

如上所述,首先使用PHP创建no1选择菜单.然后向其添加一个“更改” eventListener,如下所示：

$('#select1').change(createSelect2);

function createSelect2(){
    var option = $(this).find(':selected').val(),
    dataString = "option="+option;
    if(option != '')
    {
        $.ajax({
            type     : 'GET',
            url      : 'http://www.mitilini-trans.gr/demo/test.PHP',
            data     : dataString,
            dataType : 'JSON',
            cache: false,
            success  : function(data) {            
                var output = '<option value="">Select Sth</option>';

                $.each(data.data, function(i,s){
                    var newOption = s;

                    output += '<option value="' + newOption + '">' + newOption + '</option>';
                });

                $('#select2').empty().append(output);
            },
            error: function(){
                console.log("Ajax Failed");
            }
        }); 
    }
    else
    {
        console.log("You have to select at least sth");
    }
}

现在,no2 select菜单根据select 1 selected选项具有新选项.

和PHP 文件：

<?PHP
header('Content-Type: application/json; charset=utf-8');
header('Access-Control-Allow-Origin: *');

if(isset($_GET['option']))
{
    $option = $_GET['option'];

    if($option == 1)
    {
        $data = array('Arsenal', 'Chelsea', 'Liverpool');
    }
    if($option == 2)
    {
        $data = array('Bayern', 'Dortmund', 'Gladbach');
    }       
    if($option == 3)
    {
        $data = array('Aek', 'Panathinaikos', 'Olympiakos');
    }

    $reply = array('data' => $data, 'error' => false);
}
else
{
    $reply = array('error' => true);
}

$json = json_encode($reply);    
echo $json; 
?>

当然,我在其中使用了一些演示数据,但是您可以使其中的SQL查询填充$data数组,并使用正确的标头将它们作为json发送.最后在第二个选择菜单中使用更多的js：

$('#select2').change(selectSelect2);

function selectSelect2(){
    var option = $(this).find(':selected').val();
    if(option != '')
    {
        alert("You selected: "+option);
    }
    else
    {
        alert("You have to select at least sth");
    }
}

在这里查看http://jsfiddle.net/g3Yqq/2/工作示例

PHP MYSQL动态选择框

相关推荐