0

我正在使用 jQuery Ajax 函数来填充我的选择框。这是代码：

    $(function(){             
        $("#maker").change(function(){            
        var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html(response);
            }
        });        
        });
    });

问题是这用整个search.php页面替换了div“模型”！！！我只想在“模型”中填充选项值。

这是HTML：

<div id="models">
<select id="model" name="model" style="width:170px">
<option value="Any">Any</option>
<?php
    foreach($current_models as $model) {
?>
    <option value="<?php echo $model; ?>"><?php echo $model; ?></option>

<?php
    }
?>
</select></div>

任何帮助表示赞赏。提前致谢。

4

1 回答 1

0

所以看起来您正在返回整个 HTML 页面，而不是通过它来搜索页面的特定部分。尝试这样的事情：

$(function(){             
    $("#maker").change(function(){            
    var selected_value = $("#maker").val();      

        $.ajax({
            type: "POST",
            dataType: "html",
            url: "search.php",
            data: ({_maker: selected_value}),
            success: function(response){
                $("#models").html($(response).find('#someDiv').html());
            }
            error: function(){
                  $("#models").html('Uh oh! Something went wrong and we weren't able to process your request correctly.');
            }
        });        
    });
});

你会注意到两件事：

  1. 我指定了一个dataType属性。这告诉 jQuery 会发生什么。此外，html数据类型告诉 jQuery 在将页面渲染到响应对象之前在加载的页面上执行任何 JavaScript。

  2. 我正在使用响应创建一个 jQuery 对象，然后使用 jQuery 的.find()方法来获取响应中特定对象的内部 HTML div。

这是一个示例 JS Fiddle，为概念验证做了一些细微的修改：http: //jsfiddle.net/rvk44/1/

我还只是想指出，您可能想要添加一个错误属性，这样如果页面作为错误返回，用户就会知道这一点，而不仅仅是坐在那里盯着空白屏幕期待发生什么。（我在示例中添加了一条基本错误消息，有关返回错误属性的更多信息，请参阅jQuery 文档）。

于 2013-07-18T13:59:56.827 回答