Question

我正在尝试使用php生成一个表，并将其放在div具有“accordian-table”类的位置。但是，当我运行下面的代码时，生成的html代码不会替换div。我假设我错误地引用“.accordian-table”，因为没有每个语句的修改函数都有效。

function gettable () {
    $('.accordian-system').each( function() {

        var accordianSystem = $(this);

        var selectedID = accordianSystem.children('.selItems option:selected').val();

        $.ajax({
            type: "POST",
            url: 'ajax-gettable.php',
            data: { ID: selectedID },
            success: function(data) {
                accordianSystem.find('.accordian-table' ).replaceWith(data);
            }
        });


    } );
}

html结构是：

<div class="accordian-systems">
    <h3></h3>
    <div class="accordian-system">
        <select class="selItems"></select>
        <div class="accordian-table"></div>
    </div>
</div>

编辑：我猜它没有达到成功功能。然而，当我替换它时它会这样做：

var selectedID = accordianSystem.children('.selItems option:selected').val();

用这个：

var selectedID = $('.accordian-system').children('.selItems option:selected').val();

如果删除此及其右括号：

$('.accordian-system').each( function() {

Answer 1

此声明无效：

accordianSystem.children('.selItems option:selected').val()

这只会匹配满足该选择器的直接子项，但option:selected永远不是直接子项（它是孩子的孩子），所以它不匹配任何东西。我想你可能想要这个：

accordianSystem.find('.selItems option:selected').val()

如果您可以选择多个元素，则必须进一步修改此代码，因为它可能返回值数组，而不仅仅是单个值。

此外，路易斯的建议是合理的。不要假设你的代码在做什么。设置断点，逐步执行它，看看它实际上在做什么。如果它没有命中你的success处理程序，那么创建一个error处理程序并查看其参数以查看它失败的原因。您的代码当前编写的方式，您可能会将null作为selectedID传递，直到您实施上述建议的更改。

Answer 2

以下是JSFiddle

中的工作示例

<强> HTML：

<div class="accordian-systems">
     <h3>Accordian Systems</h3>

    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>1</option>
            <option>2</option>
        </select>
        <div class="accordian-table"></div>
    </div>
    <div class="accordian-system">
        <select class="selItems">
            <option selected='selected'>3</option>
            <option>4</option>
        </select>
        <div class="accordian-table"></div>
    </div>
</div>

<强> JS：

var accordianSystems = $('div.accordian-system');
accordianSystems.each(function (index, element) {
    var selectedItemText = $(element).find('.selItems option:selected').text();
    setTable(element, selectedItemText);
});
accordianSystems.find('.selItems').change(function () {
    setTable($(this).parent(), $(this).val());
});

function setTable(accordianSystem, id) {
    $(accordianSystem).children('div.accordian-table').text('Selected value: ' + id);
    //Here you would otherwise call your ajax function...
}

Answer 3

当select元素的值更改时，将使用select元素的值进行ajax请求。来自ajax请求的响应将div替换为.accordian-table类。 如果再次更改选择的值，该怎么办？没有要替换的div！我将提供一个应该在第一次和随后的时间工作的解决方案。

$(function() {
    $('div.accordian-system').children('select.selItems').on('change', gettable);
});

function gettable () {
    var accordianSystem = $(this).parent();
    var selectedID = this.value;
    $.ajax({
        type: "POST",
        url: 'ajax-gettable.php',
        data: { ID: selectedID },
        success: function(data) {
            var repElem = accordianSystem.children('.accordian-table' ) || $(this).next();
            repElem.replaceWith(data);
        }
    });
}

This Demo只是演示了当select元素的值发生更改时，会发出ajax请求。您可以查看调试工具的网络选项卡，您应该看到如下内容：

Remote Address:162.243.204.190:80
Request URL:http://fiddle.jshell.net/fiddleyetu/wKA2g/show/ajax-gettable.php
Request Method:POST
Status Code:404 NOT FOUND
Chrome/35.0.1916.153 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
ID:50

在每个（）中引用$（this）

3 个答案: