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