Question

我有一个名为Category的下拉列表，这些选项由一个PHP脚本填充，该脚本在MySQL表中查询类别名称。

在它旁边，我有一个名为Subcategory的下拉列表，这些选项也由一个PHP脚本填充，该脚本在MySQL表中查询子类别名称。

我想重新运行子类别查询，根据从“类别”下拉列表中选择的类别来更改“子类别”下拉列表的值。

我不希望页面刷新，所以我认为jquery可能在这里有用吗？

Answer 1

这样的东西？

$(document).ready(function(){
    var select = $("#select-element");
    select.change(function(){
        $.ajax({
            type : 'POST',
            url: "url-of-your-php-script",
            data: {
                'data-name' : 'data-to-send'               
            }
            success : function(returned){
               // Append variable  results to select..
            }                
        });            
    });
});

Answer 2

通常，您不应该使用jQuery（或任何其他框架），除非您已经在页面上下载它。当您的浏览器正在下载脚本和库（其中jQuery可能是最大的）时，页面的其余部分无法执行。我不知道为什么，但它不会下载图片，加载iframe，什么都没有。

您可以发出AJAX个请求来下载新内容。请注意，因为这意味着您实际上是在编写一个可以访问数据库的Web服务，因此请确保在服务器和javascript中验证输入，以及为删除/删除操作开发某种安全性。

这是一个用于Ajax的native javascript tutorial，但是如果你对AJAX很关注，你可以use it。

基本目标是：

编写一个网页，以查询的新参数作为参数，然后
用AJAX调用它，
使用返回的信息重新填充您的下拉列表。

我恳请您确保在让jQuery为您完成所有操作之前，先了解本机代码中的AJAX。即使您最终选择使用jQuery框架，它也会在调试，升级和重用此代码时为您提供帮助。

Answer 3

是的，你必须专门使用Jquery $ .ajax（）或$ .post（）函数。

子类别下拉列表应该监听change事件中的父类别。在Jquery你可以使用。

$（ '＃父'）。改变（函数（）{

       var parent = $(this).val();
       // Remove current subcategory options
       $('#child').children().remove();
       // AJAX POST
       $.ajax({

         type:'POST',

    data: 'parent='+parent,

    url: 'process.php',

    success: function(data){

                // Fill the subcategory with new options using jquery each method 

             }
           });

    });

如果选择<option>，则再次运行查询</option>

3 个答案: