Question

我有以下代码选择框div：

Make:<br> 
        <select name="Make">
        <option value = "Toyota">Toyota</option>
        <option value = "Honda">Honda</option>
    </select>


<div id="side_model">           
        Model:<br> 
        <select name="Model">
        <PHP CODE THAT SEARCHES DATABASE FOR ALL MODELS AVAILABLE AND LIST THEM AS OPTIONS ?>
    </select>
</div>

以下Jquery：

<script>
jQuery(document).ready(function($){
    $('#Make').change(function() {
        $.get('dropdown.php',{make: $(this).val() },function(d){
            $('#side_model').html(d);
        });
    });
});
</script>

这是我的代码的一个非常简化的版本，但我正在做的是，一旦选择了make，我在dropwdown php中查询数据库并获取所有模型，然后简单地填充列表

我的dropdown.php看起来像这样：

Model:<br> 
            <select name="Model">
            <PHP CODE THAT SEARCHES DATABASE FOR ALL MODELS THAT MATCH THE MAKE SELLECTED AND LIST THEM AS OPTIONS ?>
        </select>

好的，除了一个细节之外，代码几乎按其预期的方式工作。

而不是jQuery用dropdown.php的竞争对象替换div，而只是在它上面添加额外的选择框。

如何获取jQuery代码以使用dynamicaly genereated内容替换模型选择框？

Answer 1

使用jQuery的.replaceWith()函数（文档here）可能更有意义：

首先，为您的选择元素添加ID

<div id="side_model">           
    Model:<br> 
    <select id="Model" name="Model">
        <option value='0'>----</option>
    </select>
</div>

然后将其替换为$.get()：

的返回值

jQuery(document).ready(function($){

$('#Make').change(function() {
        $.get('dropdown.php',{make: $(this).val() },function(d){
            $('#Model').replaceWith(d);
        });
    });
});

现在，您需要在后台完成所有工作，即完整生成select（包括打开/关闭<select>标记）。

<强>更新

我刚刚注意到你正在调用$("#Make").change()，但是你永远不会给你的任何元素一个ID设置为“Make”。将ID属性添加到您选择name="Make"：

的位置

Make:<br> 
    <select id="Make" name="Make">
        <option value = "Toyota">Toyota</option>
        <option value = "Honda">Honda</option>
    </select>

Answer 2

我也注意到您拨打了$('#make')，但您的选择只有一个名称，所以请将id="make"添加到您的选择

Answer 3

在重新填充之前，可能会清除div吗？

$('#side_model').empty();

并再次填写

$('#side_model').append(/*your generated html code*/);

- 编辑 -

我也注意到你打电话给$（'＃make'），但你的选择只有这样的名字，所以请在你的选择中添加id =“make”

Jquery动态下拉菜单

3 个答案: