如何使用Ajax使用的第一个选择框的值更新jQuery的第二个选择框？ [英] How to use Ajax to update a second selectbox in jquery using the first selectbox's value?

问题描述

首先，我用一句话preSS，目标是选择一个下拉selectme​​nu项目，结构化jQuery的，选择一个父类。这种选择然后更新与子类的父的第二选择菜单。

First off, I'm using wordpress, and the goal is to choose a dropdown selectmenu item, structured in jquery, to choose a parent category. This choice then updates the second select menu with the sub-categories of the parent.

到目前为止，我有这个AJAX：

So far, I have this ajax:

<script>
$(function(){
    $( "#categories" )
      .selectmenu({
        select: function getval() {
        var parent = $("#categories").val();

        $.ajax({
            url: "ajax.php",
            data: { parent : parent },
            type: "POST",
            success: success: function(response){
                $(".sub_cat").html(response);
            },
            error: function() {
                alert("Error, possible missing file.");
            }
            }); //End of ajax
        alert(parent);
        } //End of getval

        }) //End selectMenu
      .selectmenu( "menuWidget" )
        .addClass( "overflow" );

    $( "#sub_cats" )
       .selectmenu()
       .selectmenu( "menuWidget" )
       .addClass( "overflow" );

     var categories = $('#categories');
     var subcats = $('#sub_cats');       
});
</script> 

这是将填充的HTML：

This is the HTML that will be populated:

<fieldset>
<div class=sub_cat>

</div>
</fieldset>

这是ajax.php：

And This is ajax.php:

<?php
$parent = $_POST['parent'];
$subcats = get_categories("child_of=$parent");

$parent =   "<label for="sub_cats">Select a Sub-category</label>
            <select name="sub_cats" id="sub_cats">
            <option selected="selected">Pick a Sub-Category</option>" .
            foreach($subcats as $subcat) {
            "<option value=" echo $subcat->name ">" . echo $subcat->name . "</option>"
            } .
            "</select>"
?>

在菜单进来，因为他们应该，警报进来父类总是发送到阿贾克斯的时候做出选择。但成功的警报从来没有碰过，我不知道我应该把在ajax.php文件。我的猜测是使用该文件来获取子猫科动物在PHP中，然后将其以JSON格式发送，但我不知道怎么办。

The menus come in as they should, the alerts come in and the parent category is always sent to the ajax when the choice is made. But the success alert is never touched and I have no idea what I'm supposed to put in the ajax.php file. My guess would be to use that file to get the sub-cats in php, and then send it in json format, but I don't know how.

当然任何帮助是AP preciated，我一直在挣扎了一会儿。

Absolutely any help is appreciated, I've been struggling with this for a while.

我试着从下面的解决方案，但我从来没有得到任何code或价值从ajax.php回用任何他们的答案的。多数民众赞成在它停止。我也不知道该如何填充选择框旁边的新项目。 pretend我是个超级无知的程序员谁不知道有关这些结构的一个事情，从这个角度解释，这可能会帮助我的希望。

I've tried the solutions from below but I never get any code or value back from ajax.php with any of their answers. Thats where it stops. I also don't know how to populate the next selectbox with the new item. Pretend Im a super ignorant programmer who doesn't know a thing about these structures and explain from that standpoint, that might help I hope.

推荐答案

最简单的方法是在变化事件在#categories 这必须发送一个请求到服务器，并响应以HTML格式刷新#sub_cats

The simple way is in change event in your #categories this must send a request to server and response in html format refreshes #sub_cats

让我们来看看：

//in your js 

$(document).ready(function(){
     $("#categories").change(function(){
        //here we get corrent selected id 
        //form categories in corrent selected option
        var id = $(this).val();

        //simple ajax request $.post
        $.post("ajax.php",{
            id:id           
        },function(data){
            $("#sub_cats").empty()
            $("#sub_cats").append(data)
        },"html")
    });
}

//

在ajax.php你的回报一定是在HTML

On ajax.php your return must be in Html

...上面到底取结果查询：

... your query above end fetching result:

while($sub = mysqli_fetch_array($result, MYSQLI_ASSOC)){
    echo "<option value='".$sub['id']."'>".$sub['name']."</option>";
}

瞧瞧吧。

这篇关于如何使用Ajax使用的第一个选择框的值更新jQuery的第二个选择框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！