[英]how to relate 2 dropdown and load data in 2nd dropdown in relation to 1st
I have two dropdown, one for division and another for products.According to division I want to load data in Products.ieinstead of loading each and every products in dropdown I want to load products related to division selected. 我有两个下拉菜单,一个用于部门,另一个用于产品。根据部门,我想将数据加载到Products.ie中,而不是加载下拉菜单中的每个产品,我想加载与所选部门相关的产品。
<select name="Division" id="division">
<option value='1'>Div1</option>
<option value='2'>Div3</option>
<option value='3'>Div3</option>
<option value='4'>Div4</option>
</select>
<select name="Products" id="product">
<option value='<?php echo $pid ?>' rel='1'>Prod1</option>
<option value='<?php echo $pid ?>' rel='1'>Prod2</option>
<option value='<?php echo $pid ?>' rel='2'>Prod3</option>
<option value='<?php echo $pid ?>' rel='3'>Prod4</option>
<option value='<?php echo $pid ?>' rel='3'>Prod5</option>
<option value='<?php echo $pid ?>' rel='3'>Prod6</option>
</select>
Is there any way to do using PHP and jquery.Thanks for any help/suggestions. 有什么方法可以使用PHP和jquery。谢谢任何帮助/建议。
You can add onChange event that would post the data back to backend and get the values for the 2nd dropdown. 您可以添加onChange事件,该事件会将数据发布回后端并获取第二个下拉列表的值。
Something like 就像是
$('#division').change(function(){
$.post("myPhpScript.php",{"divisionId":$('#division').val()}, function(data){
$.each(data, function(i, opt){
var elem = $('<option/>', { value : opt["value"], html: opt["label"] });
$('#product').append(elem);
});
}
});
And in php you get the JSONObject containing the value of the dropdown 在php中,您将获得包含下拉列表值的JSONObject
{"divisionId":$('#division').val()}
and get your data according to that and return a JSONArray of JSONObjects that would contain new values. 并据此获取您的数据,并返回包含新值的JSONObjects的JSONArray。
[ { "value":"prod1", "label":"Product 1" }, { "value":"prod2", "label":"Product 2" } ]
Hope this helps you. 希望这对您有所帮助。
Add an onchange Event to the first select field, which contains an Ajax Request to get the data for the new select field. 将onchange事件添加到第一个选择字段,该事件包含一个Ajax请求,以获取新选择字段的数据。
Another way would be hiding the not active select fields and show them when the onchange is triggered. 另一种方法是隐藏非活动的选择字段,并在触发onchange时显示它们。 This is more static.
这是更静态的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.