Jquery 动态下拉菜单答案

【问题标题】：Jquery dynamic dropdown menusJquery 动态下拉菜单
【发布时间】：2012-08-29 09:32:43
【问题描述】：

我有如下代码选择框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>

这是我的代码的一个非常简化的版本，但我所做的是，一旦选择了品牌，我在 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 没有将 div 替换为 dropdown.php 的内容，而是在其顶部添加了额外的选择框。

如何获取 jQuery 代码以将模型选择框替换为动态生成的内容？

【问题讨论】：

考虑使用适当的labels，而不是随机放置的文本。
你试过replacewith()吗？只需使用 select 的 ID 并将其替换为 $.get 返回的任何内容
我没有尝试替换（）。我将如何在他的情况下使用它？

标签： php jquery ajax select dynamic

【解决方案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>

【讨论】：

这些步骤都有帮助。除了我不得不回到 html 而不是替换为，因为替换只适用于 onchange 的第一个实例。主要问题是我的 div 中有一个和一个，一旦我把它放在 div 之外，一切正常。 ID也是一个问题。感谢您的帮助！

【解决方案2】：

我还注意到你打电话给$('#make')，但你的选择只有这样的名字，所以请将id="make"添加到你的选择

【讨论】：

好收获！您可能希望将此扩展为答案，否则它可能会被否决。（在当前形式下，它被视为评论）。

【解决方案3】：

也许在重新填充之前清除 div？

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

然后再次填写

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

--编辑--

我还注意到您调用了 $('#make')，但您的选择只有这样的名称，所以请在您的选择中添加 id="make"

【讨论】：

.html() 应该与此完全相同。这个解决方案只是增加了额外的代码行。
哎呀没有看到 html() 函数。真丢人。