如何使用基于2个其他下拉框的动态日期来填充下拉列表 [英] how to populate dropdown with dynamic date based on 2 other dropdown boxes

查看:103
本文介绍了如何使用基于2个其他下拉框的动态日期来填充下拉列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有3个下拉列表
1.这里我需要选择产品的质量
2.这里我需要选择标准或非标准
IF标准,那么第3列表需要填充动态数据
如果非标准然后没有(第3个框为空)



然而,填充列表(3rd)需要另一个选择,这也是基于选择在第一个下拉列表中



我不知道如何组合3个列表,并使其填充第3个



第一个列表被命名为质量
第二个列表被称为测量
第三个列表被命名为lengte_breedte



它是基于一个mysql数据库,其中我选择以下内容:
SELECT lengte_breedte FROM fb_lengte_breedte WHERE measurements =?



我有Json
标题('Content-type:application / x -json');



echo json_encode($ fb_query);
exit;





document.observe('dom:loaded',function(f){

$ ('measurements')。观察('change',populateMeasurements).bindAsEventListener();
});


函数populateMeasurements(e){



//收集参数

var qs =' &measurements ='+ $ F('measurements');



//创建请求
var req = new Ajax.Request('nameRequest.php',{
method:'post',
参数:qs,
onComplete:function(transport){

//收集响应,evel对象
var obj = eval(transport.responseText);

//清除选择项
$('lengte_breedte')。options.length = 0;

//迭代并构建新菜单
$(' langte_breedte')。options [$('lengte_breedte')。options.length] = new Option(' - Select - ','');
var ListItems = new Array();

//创建新的选择项目选项
obj.each(function(t){
ListItems [ListItems.length] = new Option(t.lengte_breedte,t.lengte_breedte);
});

//填充新项
for(var i = ListItems.length - 1; i> = 0; i - ){
$('lengte_breedte')。options [$('lengte_breedte')。options.length] = ListItems [i];
}

} // onComplete
});

} // end function


解决方案

所以看起来只有真的需要如果第二个被选择为标准,首先要做的是填充第三个列表,添加一个如果条件在您的事件监听器正在监视第二个列表的更改。如果非标准清空第三个列表,你完成了。否则,如果标准执行ajax调用nameRequest.php传递列表1的当前值作为参数。在返回呼叫时,填充第三个列表,你很好去。



作为一个注释,您应该在等待ajax填充第3列表时禁用提交按钮当您从返回的数据完成列表时,可以重新启用。


I have 3 dropdownlists 1. here I need to select a quality of products 2. here I need to select standard or non standard IF standard then the 3rd list needs to be populated with dynamic data IF non standard then nothing (3rd box empty)

However the populated list (3rd) needs another selection which is based also on the selection out of the first dropdown list

I have no idea how to combine the 3 lists and make it populate the 3rd one

First list is named quality Second list is named measurements Third list is named lengte_breedte

it is based on a mysql database where I select the following: SELECT lengte_breedte FROM fb_lengte_breedte WHERE measurements = ?

And I have the Json header('Content-type: application/x-json');

echo json_encode($fb_query); exit;

document.observe('dom:loaded', function(f){ $('measurements').observe('change', populateMeasurements).bindAsEventListener(); }); function populateMeasurements(e){ // collect params var qs = '&measurements=' + $F('measurements'); // create request var req = new Ajax.Request('nameRequest.php', { method: 'post', parameters: qs, onComplete: function(transport){ // collect response, evel to object var obj = eval(transport.responseText); // clear select item $('lengte_breedte').options.length = 0; // iterate and build new menu $('lengte_breedte').options[$('lengte_breedte').options.length] = new Option('-- Select --', ''); var ListItems = new Array(); // create new select item options obj.each(function(t){ ListItems[ListItems.length] = new Option(t.lengte_breedte, t.lengte_breedte); }); // populate new item for(var i=ListItems.length - 1;i>=0;i--){ $('lengte_breedte').options[$('lengte_breedte').options.length] = ListItems[i]; } } // onComplete }); } // end function

解决方案

So it seems like only only really need to populate the 3rd listed if the 2nd is selected to standard to the first thing to do is add an if condition in your event listener that is watching for the change of the 2nd list. If non standard empty the 3rd list and you are done. Else if standard do the ajax call to nameRequest.php passing the current value of list 1 as a parameter that. Upon return of the call populate the 3rd list and you are good to go.

As a note you should disable the submit button while waiting for the ajax to populate the 3rd list then reenable when you are done building that list from the returned data.

这篇关于如何使用基于2个其他下拉框的动态日期来填充下拉列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆