Jquery动态下拉菜单

时间:2012-09-04 17:11:29

标签: php jquery ajax select dynamic

我有以下代码选择框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内容替换模型选择框?

3 个答案:

答案 0 :(得分:2)

使用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>

答案 1 :(得分:1)

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

答案 2 :(得分:0)

在重新填充之前,可能会清除div吗?

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

并再次填写

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

- 编辑 -

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