Jquery动态下拉菜单 - Jquery dynamic dropdown menus

Jquery dynamic dropdown menus

本文关键字：下拉菜单动态 Jquery | 更新日期: 2023-09-27

我有以下代码选择框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中查询数据库，获得该make的所有模型，然后简单地填充列表

我的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代码将模型选择框替换为动态生成的内容？

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

首先，将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>

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

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

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

并再次填充

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

--编辑--

我还注意到您调用$（'#make'），但您的select只有这样的名称，所以请在您的select 中添加id="make"