选择基于另一个选择使用PHP不工作

使用PHP Select基于另一个select仅在添加新行时不起作用。

有关演示访问（请参阅演示步骤）

  1. 加载页面时有两行，它们按预期工作。 （服务选项按项目选项）
  2. 单击“添加行”按钮，将添加另一行
  3. 新插入的行无效。 （服务选择没有提供任何选项，前两个给出）

我尝试了什么： 

  runQuery("SELECT * FROM service WHERE IRN=:irn ORDER BY Sr ASC "); $stmt->bindParam(':irn',$id); $stmt->execute(); $stmtin=$user_home->runQuery("SELECT * FROM item WHERE IRN=:irn ORDER BY Sr ASC "); $stmtin->bindParam(':irn',$id); $stmtin->execute(); $rowin=$stmtin->fetch( PDO::FETCH_ASSOC ); if( $stmt->rowCount() > 0 ){ echo "Select Service ({$rowin['Name']})"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "{$row['Name']}"; } } } exit(); } ?>     function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem=document.querySelector('select[name="item1"]'); var oSelService=document.querySelector('select[name="service1"]'); oSelItem.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false );    
 
 
    
 
 Item Service Qty 
 
   Select Item runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "{$row['Name']}"; } } ?>     
 
   Select Item runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "{$row['Name']}"; } } ?>     
 
   
 
  
 
 
 
   Select Item runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "{$row['Name']}"; } } ?>
$(document).ready(function() { var cont = 3 var qty = "qty" var item = "item" var what = "service" $(".add-row").click(function() { var nameqty = qty + cont; var nameitem = item + cont; var namewhat = what + cont; var markup = $('#markup_model tbody'); $(markup).find('.country:eq(0)').attr('name', nameitem); $(markup).find('.country:eq(1)').attr('name', namewhat); $(markup).find('input').attr('name', nameqty); $(markup.html()).insertBefore($('button[type="submit"]').closest("tr")); cont++; }); }); function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem2=document.querySelector('select[name="item2"]'); var oSelService2=document.querySelector('select[name="service2"]'); oSelItem2.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService2 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem2 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false ); function ajax(m,u,p,c,o){ var xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if( xhr.readyState==4 && xhr.status==200 )c.call( this, xhr.response, o, xhr.getAllResponseHeaders() ); }; var params=[]; for( var n in p )params.push(n+'='+p[n]); switch( m.toLowerCase() ){ case 'post': p=params.join('&'); break; case 'get': u+='?'+params.join('&'); p=null; break; } xhr.open( m.toUpperCase(), u, true ); xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send( p ); } function createmenu(r,o,h){ o.menu.innerHTML=r; } function bindEvents(){ var oSelItem3=document.querySelector('select[name="item3"]'); var oSelService3=document.querySelector('select[name="service3"]'); oSelItem3.onchange=function(e){ var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':this.options[ this.options.selectedIndex ].value }; var opts={ menu:oSelService3 }; ajax.call( this, method, url, params, createmenu, opts ); }.bind( oSelItem3 ); } document.addEventListener( 'DOMContentLoaded', bindEvents,false );

在上面的代码中，您运行相同的查询两次，我认为是复制/粘贴错误？

以下内容基于之前提出的问题和帮助。 

 mysql> describe irn_item; +-------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------+------------------+------+-----+---------+----------------+ | irn | int(10) unsigned | NO | PRI | NULL | auto_increment | | name | varchar(50) | YES | | NULL | | +-------+------------------+------+-----+---------+----------------+ mysql> select * from irn_item; +-----+------------+ | irn | name | +-----+------------+ | 1 | Shirt | | 2 | Trousers | | 3 | Jacket | | 4 | Socks | | 5 | Underpants | | 6 | Hat | +-----+------------+ mysql> describe irn_service; +-------------+------------------+------+-----+---------+----------------+ | Field | Type | Null | Key | Default | Extra | +-------------+------------------+------+-----+---------+----------------+ | srn | int(10) unsigned | NO | PRI | NULL | auto_increment | | irn | int(10) unsigned | NO | MUL | 1 | | | instruction | varchar(50) | NO | | 1 | | +-------------+------------------+------+-----+---------+----------------+ mysql> select * from irn_service; +-----+-----+-----------------------+ | srn | irn | instruction | +-----+-----+-----------------------+ | 1 | 2 | Iron | | 2 | 1 | Dry Clean Only | | 3 | 3 | Hi-Pressure dry clean | | 4 | 4 | Steam Clean | | 5 | 5 | Decontaminate | | 6 | 6 | Waterproof | +-----+-----+-----------------------+

在不知道数据库模式的情况下，我根据原始代码中的sql中的一些列组成了一个快速示例数据库。 下面的代码使用mysqli而不是PDO只是因为我的测试它写得快得多，所以请忽略它不完全遵循的事实。 我相信，您遇到麻烦的一个重要方面是新添加的行不会复制触发ajax请求的事件处理程序。 昨天我确实提到过，当克隆节点时，不会复制/克隆使用addEventListener分配的任何事件处理程序 – 所以为了确保复制/克隆事件处理程序，你需要使用inline event handlers即： 

 prepare( $sql ); if( $stmt ){ $stmt->bind_param( 's', $id ); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $srn, $instruction ); while( $stmt->fetch() ){ $html[]="

使用这段代码我省去了重新命名新添加的元素的麻烦 – 这可能不是绝对必要的，因为您可以使用元素名称的array syntax – 即： Item Service Qty

和ajax.php 

  Select Service (Pant)"; echo ""; ?>
Interesting Posts

一个表单上有多个jqueryvalidation器

使用css或jquery将一个图像淡入另一个图像

webforms：在javascript选项中动态添加到下拉列表中

将jQuery自动完成应用于克隆元素

为什么$ .getJSON（）会阻止浏览器？

正则表达式只允许10位以下的数字？

jquery ajax在Internet Explorer中不会触发

如何判断ASP中的页面卸载是否为PostBack

Slider在jQuery选项卡中不起作用

如何在d3多线图中使用json数据而不是tsv文件？