javascript - 选择选项后使用ajax过滤数据

Question

我尝试在选择选项后使用ajax来过滤数据。这是html代码:

<select name="filter" onchange="filter(this.value)">
  <option disabled selected>Sort By</option>
  <option value="all">All Artists</option>
  <option value="new">Free Artists</option>
</select>

在jquery代码中，我尝试在 Accordion 中打印过滤后的数据:

<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css"/>
<script type="text/javascript" src="jquery-ui/jquery.js"></script>
<script type="text/javascript" src="jquery-ui/jquery-ui.js"></script>

$(document).ready(function(){
    function filter(item)
    {
        $.ajax({
            type: "POST",
            url: "filter2.php",
            data: { value: item},
            success:function(data){
                    document.getElementById('getData').style.display = "block";
                    document.getElementById("getData").innerHTML = response;
                    $('#hideData').hide();
                     $("#myAccordion").accordion({heightStyle:"content", collapsible:true});
                        $("#myAccordion li ").draggable({
                            appendTo: "body",
                            helper: "clone",
                             refreshPositions: true,
                             start: function (event, ui) {
                                sourceElement = $(this);
                            },          
                        });
            }
        });
    }
});

还有 filter2.php 我尝试打印名称:

require_once('inc/database_connection.php');
include 'model/model.project.php';
include 'model/model.filter.php';
$fieldname = $_POST['value'];
if($fieldname=="all")
{
    $result1 = getAll();
    while($row1=mysqli_fetch_array($result1))
    {
        $name = $row1['username'];
        echo '<div id="getData">';
        echo '<ul class="source">';
        echo "<li class='item'><span class='closer'>x</span>".$name."</li>";
    }
        echo '</ul>';
        echo '</div>';
}
else if($fieldname=="new")
{
    $result2 = getFree();
    while($row2=mysqli_fetch_array($result2))
    {
        $name = $row2['username'];
        $color = $row2['color'];
        echo '<div id="getData">';
        echo '<ul class="source">';
        if($color=0)
        {
            echo "<li class='item'><span class='closer'>x</span>".$name."</li>";            
        }       
    }
        echo '</ul>';
        echo '</div>';      
}

所以问题是它不起作用。选择选项后我没有任何反应。

Answer 1

简单地说，您不应该将函数放在 $(document).ready(function(){ });所以删除它后，最终的 JavaScript 代码将是如果还有任何问题请告诉我

function filter(item) {
    $.ajax({
        type: "POST",
        url: "filter2.php",
        data: {value: item},
        success: function(data) {
            alert(data);
            document.getElementById('getData').style.display = "block";
            document.getElementById("getData").innerHTML = response;
            $('#hideData').hide();
            $("#myAccordion").accordion({
                heightStyle: "content",
                collapsible: true
            });
            $("#myAccordion li ").draggable({
                appendTo: "body",
                helper: "clone",
                refreshPositions: true,
                start: function(event, ui) {
                    sourceElement = $(this);
                },
            });
        }
    });
}