Ajax形式,2个外部源下拉 [英] Ajax form, 2 drop downs with external source
问题描述
有一种方法,一旦我从表单上的下拉列表中选择,它将从第一个下拉列表中选择所有模型,并在第二个下拉列表中选择
这里是我的代码
< form>
< div class =landing_quote_left>
< table cellpadding =0cellspacing =8border =0>
< tr>
< td>
< label for =ajax_make_idclass =landing_quote_label>制作:< / label>
< / td>
< td>
< span id =ajax_make_select>< select name =2f_make_idid =ajax_make_idstyle =width:170px; onchange =Landing.getMakeFace(this.value);>< option value =999>选择一个Make< / option>< option value =1> Acura< / option>< option值= 2 >奥迪< /选项< /选择>< /跨度>
< / td>
< / tr>
< tr>
< td>
< label for =ajax_model_idclass =landing_quote_label> Model:< / label>
< / td>
< td>
< span id =ajax_model_select>
< option value =>正在加载...< / option>
< / select>
< / span>
< / td>
< / tr>
< / table>
< / div><! - END landing_quote_left - >
< / form>
所以如果我选择Acura,第二个下拉菜单将显示所有模型的列表,例如
MDX
RDX
RL
TL
TSX
ZDX
如果可能的话,从不同文件加载下拉菜单。 {php或者xml或者其他任何可能的东西}
感谢您的时间!
以下是关于如何完成此操作的一些粗略代码。
在页面加载时,填充下拉列表1。
$(function(){
$ .get('file1.php',function(data){
$('#dropdown1').html(data);
});
//关于dropdown1的变化用各自的数据填充dropdown2
$(' (function)(){
$ .get('file2.php',{make:$(this).val()},function(data){
$(' #dropdown2')。html(data);
});
});
});
所以在你的file2.php中,你可以检查 $ _ GET
make 变量传递给c $ c>数组,然后您可以发回该模型的所有选项。你也可以发回json而不是html,但是这会给你一个关于如何去做的粗略想法,我认为最好先保持简单。
is there a way once I select from a drop down list on a form that it will select all models from the first dropdown in a second drop down
Here is my code
<form>
<div class="landing_quote_left">
<table cellpadding="0" cellspacing="8" border="0">
<tr>
<td>
<label for="ajax_make_id" class="landing_quote_label">Make:</label>
</td>
<td>
<span id="ajax_make_select"><select name="2f_make_id" id="ajax_make_id" style="width: 170px;" onchange="Landing.getMakeFace(this.value);"><option value="999">Select a Make</option><option value="1">Acura</option><option value="2">Audi</option</select></span>
</td>
</tr>
<tr>
<td>
<label for="ajax_model_id" class="landing_quote_label">Model:</label>
</td>
<td>
<span id="ajax_model_select">
<select name="2f_model_id" id="ajax_model_id" style="width: 170px;" onchange="Landing.getModelFace(this.value);">
<option value="">Loading...</option>
</select>
</span>
</td>
</tr>
</table>
</div><!-- END landing_quote_left -->
</form>
So if I select Acura, the second drop down will show a list of all models ie MDX RDX RL TL TSX ZDX
If possible, how would I have both dropdowns load from different files. {php or xml or whatever else is possible}
Thanks for your time!
Here's some rough code on how to accomplish this.
On page load, populate dropdown1.
$(function(){
$.get('file1.php', function(data){
$('#dropdown1').html( data );
});
// on change of dropdown1 populate dropdown2 with the respective data
$('#dropdown1').change(function(){
$.get('file2.php',{ make: $(this).val() }, function(data){
$('#dropdown2').html( data );
});
});
});
So in your file2.php you can check the $_GET
array for the make
variable passed in, then you can send back all the options for that model. You could also send back json instead of html but this gives you a rough idea of how to do it and i think it's best to keep it simple at first.
这篇关于Ajax形式,2个外部源下拉的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!