选择基于另一个选择使用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