Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/php/287.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Php jquery在下拉列表中添加包含json数据的表行_Php_Javascript_Jquery_Json - Fatal编程技术网

Php jquery在下拉列表中添加包含json数据的表行

Php jquery在下拉列表中添加包含json数据的表行,php,javascript,jquery,json,Php,Javascript,Jquery,Json,我有一个web表单,其中有一个表,用户可以向其中添加其他行。表的第一行由相关下拉列表组成。下拉列表由引用文件中的json数据填充。我使用的代码如下: //the add row function $(function(){ var newgroup = $('<tr>').addClass('rec-rows'); $('#addRow').click(function(e){ e.preventDefault(); $('.rec-rows').first().clone(

我有一个web表单,其中有一个表,用户可以向其中添加其他行。表的第一行由相关下拉列表组成。下拉列表由引用文件中的json数据填充。我使用的代码如下:

//the add row function
$(function(){
var newgroup = $('<tr>').addClass('rec-rows');
$('#addRow').click(function(e){
    e.preventDefault();
$('.rec-rows').first().clone().appendTo(newgroup).appendTo('#details');     }); 

});

//onChange function
$(".rec-rows #section").live('change',function(){


var sSec =$(this).parent().find('#section').val();  

$("#divParts").hide();
$("#divDesc").hide(); 
$("#divGroup").hide(); 
if(sSec=="select") {
$("#divCategory").hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"
}
理论上,会添加一个新行,我粘贴的onChange代码将适用于每一行。然而,结果根本不是这样。相反,当添加行并且用户对新行进行选择时,第一行中的值将更新。表的第一部分如下所示:

<td width="" align="left"> 
<div>
<select id="section" name="section" style="margin-top:15px;"> 
<option value="select">Select Area</option> 
<option value="a">a</option> 
<option value="b">b</option> 
<option value="c">c</option> 
</select> 
</div> 
</td> 

我非常感谢任何帮助,以使这段代码按预期工作-这将是一个简单的添加行,其中下拉选择只更新其所在的行。谢谢。

您可以在这里查看我关于如何将行动态添加到表开头的答案:

这可能对你有帮助

或者我也看到了一个问题

更改$section.change

致:


这可能就是为什么新的下拉列表不起作用了

找到了解决方案!我被建议在以下情况下声明父母:

$(".section").change( function () {
var sSec =$(this).val();  
context = $(this).parents("tr");
if(sSec=="select") {
$("#divCategory", context).hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"

现在,每次单击“添加行”时,都会添加一行,并在用户选择该行和仅该行时更改下拉列表。

我确实找到了这篇文章,它可能回答了我需要做什么才能获得所需的结果:但我不确定如何将其合并到现有代码中?提前谢谢…谢谢你的链接。但是,它不起作用,因为下拉选择在添加的行上不起作用我尝试过一个类似的解决方案,我没有克隆,而是像上面的解决方案那样附加了数据。你能提供上面表格第一部分的html吗?这样我就可以尝试完全了解你在做什么了?好的,我已经添加了表格第一部分的html。请让我知道,如果有什么我可以提供帮助与解决方案。不,没有工作。让我更新上面的代码,这样你就可以看到我在过去一个小时里一直在尝试什么…我已经编辑了上面的问题。我从这篇文章中得到了一些修改,这些修改似乎是在尝试我现在的样子,只是我无法让它与我的onChange函数一起工作。
$(".section").change( function () {
var sSec =$(this).val();  
context = $(this).parents("tr");
if(sSec=="select") {
$("#divCategory", context).hide();
} else {
$.getJSON("static/site_category.json",  function(json) {
var catJson = json[sSec];
var options = "<option value=\"select\">Select Area Type</option>";
for(i=0;i<catJson.length;i++) {
options +="<option value=\""+catJson[i].ky+"\">"+catJson[i].val+"</option>"