Intereting Posts
Подтвердить электронную почту в php Laravel + Homestead + Vagrant не работает Как визуализировать javascript с другого сайта, внутри приложения PHP? PHP Image Resize & My upload script Предупреждение: mysql_fetch_array (): предоставленный аргумент не является допустимым результатом MySQL в строке 40 Печать даты MongoDB с PHP Подключение к MYSQLi через терминал в Mac OS с использованием MAMP Автоматизация работы на рабочем месте: импорт текста пули PowerPoint в лист Excel Избранная опция symfony2 Работает только на один-на-один из которых должно быть много-ко-многим, webrtc как вручную вставить строку с html-кодами в таблицу wp_posts PHP для Delphi и обратно Шифрование-Расшифровка с использованием Rijndael Twilio Multiple Number Number, что эквивалентно API REST для данного TWIML Преобразование земных километров в радианы в php На любых языках Могу ли я захватить веб-страницу и сохранить ее файл изображения? (нет установки, нет activeX)

Выбрать на основе другого выбора с помощью php Не работает

Select на основе другого select используя PHP не работает только при добавлении новой строки.

Для демонстрации здесь (см. Шаги для демонстрации)

  1. При загрузке страницы две строки, они работают по мере необходимости. (Опция «Сервис» соответствует опционному элементу)
  2. Нажмите кнопку «Добавить строку», добавится еще одна строка
  3. Вновь вставленная строка не работает. (Выбор услуги не дает никаких параметров, как показывают первые два)

То, что я пробовал:

 <?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> 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 ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(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++; }); }); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> </body> </html> - <?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> 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 ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(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++; }); }); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> </body> </html> всего <?php require_once '../home.php' ?> <?php if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $action && $id && !is_nan( $id ) ){ $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; } } } exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type='text/javascript' charset='utf-8'> 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 ); </script> </head> <body> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php //$sql='select * from `item` order by `Sr` asc;'; $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); $stmt->execute(); if( $stmt->rowCount() > 0 ){ while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; } } ?> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(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++; }); }); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> <script type='text/javascript' charset='utf-8'> 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 ); </script> </body> </html> 

В вашем коде выше вы используете тот же запрос дважды, который, как я полагаю, является ошибкой копирования / вставки?

Далее следует предыдущий вопрос и уже предложенная помощь.

 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 . <select onchange='evtselect(event)'>...</select> : <select onchange='evtselect(event)'>...</select>

 <?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpwd = 'xxx'; $dbname = 'xxx'; $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname ); if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); try{ $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $id && !empty( $id ) ){ $html=array(); $sql='select `srn`,`instruction` from `irn_service` where `irn` = ? order by `srn` asc'; $stmt=$db->prepare( $sql ); if( $stmt ){ $stmt->bind_param( 's', $id ); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $srn, $instruction ); while( $stmt->fetch() ){ $html[]="<option value='{$srn}'>{$instruction}"; } $stmt->close(); } header('Content-Type: text/html'); echo implode( PHP_EOL, $html ); } }catch( Exception $e ){ echo $e->getMessage(); } exit(); } ?> <!doctype html> <html> <head> <title>Dependent / Chained SELECT menus</title> <script> /* AJAX FUNCTION */ 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 ); } /* AJAX CALLBACK */ function createmenu(r,o,h){ o.menu.innerHTML=r; } /* UTILITY TO FIND NEXT SIBLING ELEMENT NODE */ function get_nextsibling(n){ x=n.nextSibling; while ( x.nodeType!==1 ) x=x.nextSibling; return x; } /* INLINE EVENT HANDLER */ function evtselect(e){ try{ var el=e.target; if( el.value=='null' || el.value==null )return false; var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':el.value }; var td=get_nextsibling( el.parentNode ); var oSelect=td.querySelector('select'); var opts={ menu:oSelect }; ajax.call( this, method, url, params, createmenu, opts ); }catch( err ){ console.log( err ); } } function bindEvents(){ var bttn=document.querySelector('input[name="add"]'); var tbl=document.querySelector('form#item_sel > table'); if( bttn && tbl ){ bttn.addEventListener('click',function(e){ /* get a reference to the first & last row, of class "item", in table */ var tr=tbl.querySelectorAll( 'tr.items' )[0]; var ref=tbl.querySelector( 'tr.save' ); /* Create a clone of the entire row - which includes the inline event handlers */ var clone=tr.cloneNode( true ); /* Insert the new row after the last row */ tr.parentNode.insertBefore( clone, ref ); /* Ensure that newly added "service" select menu is empty */ clone.querySelector('select[name="item[]"]').value='null'; clone.querySelector('select[name="service[]"]').innerHTML=''; clone.querySelector('input[name="qty[]"]').value=''; },{ capture:false, passive:true, once:false } ); } } document.addEventListener( 'DOMContentLoaded', bindEvents, false ); </script> <style type='text/css' charset='utf-8'> select {padding:1rem;width:300px;} </style> </head> <body> <h1>Chained select menus using basic ajax</h1> <form method='post' id='item_sel'> <table> <tr class='headers'> <th scope='col'>Item</th> <th scope='col'>Service</th> <th scope='col'>Qty</th> </tr> <tr class='items'> <td> <select name='item' class='country' onchange='evtselect(event)'> <option value=null>Please Select <?php $sql='select * from `irn_item` order by `irn`;'; $result=$db->query( $sql ); $html=array(); if( $result ){ while( $rs=$result->fetch_object() ){ $html[]="<option value='{$rs->irn}'>{$rs->name}"; } echo implode( PHP_EOL, $html ); } ?> </select> </td> <td><select name='service' class='country'></select></td> <td><input type='number' name='qty' min=0 max=1000 /></td> </tr> <tr class='save'> <td colspan='3'> <button type='submit' name='btnsave' class='btn btn-default'> <span class='glyphicon glyphicon-save'></span> &nbsp; Save </button> </td> </tr> </table> <input name='add' type='button' class='add-row' value='Add Row' /> </form> </body> </html> - <?php $dbhost = 'localhost'; $dbuser = 'root'; $dbpwd = 'xxx'; $dbname = 'xxx'; $db = new mysqli( $dbhost, $dbuser, $dbpwd, $dbname ); if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ ob_clean(); try{ $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); if( $id && !empty( $id ) ){ $html=array(); $sql='select `srn`,`instruction` from `irn_service` where `irn` = ? order by `srn` asc'; $stmt=$db->prepare( $sql ); if( $stmt ){ $stmt->bind_param( 's', $id ); $stmt->execute(); $stmt->store_result(); $stmt->bind_result( $srn, $instruction ); while( $stmt->fetch() ){ $html[]="<option value='{$srn}'>{$instruction}"; } $stmt->close(); } header('Content-Type: text/html'); echo implode( PHP_EOL, $html ); } }catch( Exception $e ){ echo $e->getMessage(); } exit(); } ?> <!doctype html> <html> <head> <title>Dependent / Chained SELECT menus</title> <script> /* AJAX FUNCTION */ 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 ); } /* AJAX CALLBACK */ function createmenu(r,o,h){ o.menu.innerHTML=r; } /* UTILITY TO FIND NEXT SIBLING ELEMENT NODE */ function get_nextsibling(n){ x=n.nextSibling; while ( x.nodeType!==1 ) x=x.nextSibling; return x; } /* INLINE EVENT HANDLER */ function evtselect(e){ try{ var el=e.target; if( el.value=='null' || el.value==null )return false; var method='post'; var url=location.href; var params={ 'action':'get_dependant_menu', 'id':el.value }; var td=get_nextsibling( el.parentNode ); var oSelect=td.querySelector('select'); var opts={ menu:oSelect }; ajax.call( this, method, url, params, createmenu, opts ); }catch( err ){ console.log( err ); } } function bindEvents(){ var bttn=document.querySelector('input[name="add"]'); var tbl=document.querySelector('form#item_sel > table'); if( bttn && tbl ){ bttn.addEventListener('click',function(e){ /* get a reference to the first & last row, of class "item", in table */ var tr=tbl.querySelectorAll( 'tr.items' )[0]; var ref=tbl.querySelector( 'tr.save' ); /* Create a clone of the entire row - which includes the inline event handlers */ var clone=tr.cloneNode( true ); /* Insert the new row after the last row */ tr.parentNode.insertBefore( clone, ref ); /* Ensure that newly added "service" select menu is empty */ clone.querySelector('select[name="item[]"]').value='null'; clone.querySelector('select[name="service[]"]').innerHTML=''; clone.querySelector('input[name="qty[]"]').value=''; },{ capture:false, passive:true, once:false } ); } } document.addEventListener( 'DOMContentLoaded', bindEvents, false ); </script> <style type='text/css' charset='utf-8'> select {padding:1rem;width:300px;} </style> </head> <body> <h1>Chained select menus using basic ajax</h1> <form method='post' id='item_sel'> <table> <tr class='headers'> <th scope='col'>Item</th> <th scope='col'>Service</th> <th scope='col'>Qty</th> </tr> <tr class='items'> <td> <select name='item' class='country' onchange='evtselect(event)'> <option value=null>Please Select <?php $sql='select * from `irn_item` order by `irn`;'; $result=$db->query( $sql ); $html=array(); if( $result ){ while( $rs=$result->fetch_object() ){ $html[]="<option value='{$rs->irn}'>{$rs->name}"; } echo implode( PHP_EOL, $html ); } ?> </select> </td> <td><select name='service' class='country'></select></td> <td><input type='number' name='qty' min=0 max=1000 /></td> </tr> <tr class='save'> <td colspan='3'> <button type='submit' name='btnsave' class='btn btn-default'> <span class='glyphicon glyphicon-save'></span> &nbsp; Save </button> </td> </tr> </table> <input name='add' type='button' class='add-row' value='Add Row' /> </form> </body> </html> 

С помощью этого кода я взял на себя задачу переименования недавно добавленных элементов – это, вероятно, не является абсолютно необходимым, поскольку вместо этого вы можете использовать array syntax для имен элементов – viz: <select name='item[]' onchange='evtselect(event)> или <input type='number' name='qty[]' /> т. д., тогда обычно используйте соответствующие значения в PHP. Следует отметить, что если вы решите этот подход (т. Е. Синтаксис массива), вам нужно будет посмотреть на различные селекторы, используемые в javascript, и соответствующим образом изменить имена.

Я надеюсь, что с этим новым пониманием использования inline event handlers вы сможете уловить проблему, которую у вас есть – вы можете с небольшим небольшим редактированием этого кода запустить ее для себя, чтобы убедиться, что приложение работает правильно. Вы должны отредактировать имена таблиц ( irn_item -> item , irn_service -> service ) и добавить соответствующие данные db / pwd … Удачи

Вы действительно должны изменить логику здесь, извините, но в этом случае статичный динамический контент не будет работать … что, если у нас есть строки 4 и 5 и 10 .. вам действительно нужно предоставить весь набор элементов общий класс затем присоединяет событие, используя делегирование события on() поэтому добавляются новые элементы, добавленные динамически.

Например, измените класс country на item в столбцах позиции и класс country для service в столбце службы:

 $('body').on('change', '.item', function(){ //You're ajax logic here //Try to use `$.post()` instead //Target the related service list like var related_service_select = $(this).closest('tr').find('.service'); //Now you can fill it with the server side response }); 

Надеюсь это поможет.

Ваша проблема связана с этой ошибкой – Uncaught TypeError: невозможно установить свойство «onchange» null в HTMLDocument.bindEvents в строке 243. Вы можете видеть то же самое в элементах проверки. Это связано с тем, что вы определяете функцию bindEvents для item3, которая еще не добавлена. Также это будет работать только в случае добавления одной строки. Изменена ваша логика и многократно используется jquery. Я прокомментировал часть php в вашем коде и жестко закодировал этот материал. Также создан файл php, который отправляет ответ ajax при изменении поля выбора.

  <?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(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++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html> -  <?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(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++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html> всего  <?php // require_once '../home.php' ?> <?php foreach($_POST as $key => $val) { echo "$key => $val <br>"; } if( $_SERVER['REQUEST_METHOD']=='POST' && isset( $_POST['action'], $_POST['id'] ) && $_POST['action']=='get_dependant_menu' ){ echo "here <br>"; ob_clean(); // // $action=filter_input( INPUT_POST, 'action', FILTER_SANITIZE_STRING ); // $id=filter_input( INPUT_POST, 'id', FILTER_SANITIZE_STRING ); // if( $action && $id && !is_nan( $id ) ){ // // $stmt=$user_home->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 "<option value='Select Service'>Select Service ({$rowin['Name']})</option>"; // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['SRN']}'>{$row['Name']}</option>"; // } // } // } echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; exit(); } ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> </head> <body> <div class="container"> <form method="post" action="invoice_form.php" id="item_sel"> <table id="chiru_inv" class="table table-striped table-hover table-bordered table-responsive"> <tr> <td colspan="3"> <input type="text" name="customer" value="" placeholder="Customer Name"> </td> </tr> <tr> <th>Item</th> <th>Service</th> <th>Qty</th> </tr> <tr> <td> <select name='item1' class='country'> <option value="Select Item">Select Item</option> <?php // //$sql='select * from `item` order by `Sr` asc;'; // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service1"> </select></td> <td><input type="text" name="qty1" value="" placeholder="Quantity"></td> </tr> <tr> <td> <select name='item2' class='country'> <option>Select Item</option> <?php // // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select></td> <td><select class="country" name="service2"> </select></td> <td><input type="text" name="qty2" value="" placeholder="Quantity"></td> </tr> <tr> <td colspan="3"><button type="submit" name="btnsave" class="btn btn-default"> <span class="glyphicon glyphicon-save"></span> &nbsp; Save </button> </td> </tr> </table> <input type="button" class="add-row" value="Add Row"> </form> <div id="markup_model" class="hide"> <table> <tr> <td> <select name="nameitem" class="country"> <option>Select Item</option> <?php // $stmt=$user_home->runQuery("SELECT * FROM item ORDER BY Sr ASC "); // $stmt->execute(); // // if( $stmt->rowCount() > 0 ){ // while( $row=$stmt->fetch( PDO::FETCH_ASSOC ) ){ // echo "<option value='{$row['IRN']}'>{$row['Name']}</option>"; // } // } ?> <option value='ZZ2017TF11A1'>Shirt</option> <option value='ZZ2017TF11A2'>Pant</option> </select> </td> <td> <select class="country" name="namewhat"></select> </td> <td> <input type="text" name="nameqty" value="" placeholder="Quantity" /> </td> </tr> </table> </div> </div> <script src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript"> $(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++; }); $('.container').on( 'change', '.country', function () { //console.log($(this).attr('name')); var oSelItem = $(this).attr('name'); var lastChar = oSelItem.substr(oSelItem.length -1); var prevChar = oSelItem.substr(0, oSelItem.length-1); //console.log(prevChar); if(prevChar === "item") { var oSelService = "service" + lastChar; console.log(oSelItem + " " + oSelService); console.log($(this).val()); var thisId = $(this).val(); $.ajax({ type: 'post', url: 'ajax.php', data: { 'id':thisId, 'action':'get_dependent_menu' }, success: function (response) { //alert(response); console.log(oSelService); $('select[name="'+ oSelService +'"]').html(response); } }); } }); }); </script> </body> </html> 

И ajax.php

  <?php echo "<option value='Select Service'>Select Service (Pant)</option>"; echo "<option value='12121211'>Iron</option>"; ?>