get selected option from dropdown after cloning..

get selected option from dropdown after cloning..

  1. After cloning the dropdown list i want to save the options selected in DB..pl. help me...

  4. <?php

  6. ?><!DOCTYPE html>
  7. <html>    
  8. <head>
  9.     <title></title> 
  10. </head>
  11. <body>
  12. <form name="frmUser" method="post" action="leavesave.php">
  13. <table border="1" id="table">
  14. <tr><td>
  15.     <select class="cat">
  16.        <option value="c">A</option>
  17.        <option value="p">B</option>
  18.        <option value="n">C</option>
  19.        <option value="k">D</option>
  20.     </select>
  21.    </td>
  22.    <td><select class="item"></select></td>
  23. </tr>
  24. </table>
  25. <INPUT type='button' value='Add Row' />
  26. <INPUT type='Submit' value='SAVE' />
  27. </form>

  29. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  30. <script type="text/javascript">
  31.  c=new Array('a1','a2','a3');
  32.   p=new Array('p1','p2','p3');
  33.   n=new Array('n1','n2','n3');
  34.   k=new Array('k1','k2','k3');

  36.   $(function() {
  37.       $('#table').on('change', '.cat', function(){
  38.           var cat = $(this).val();
  39.           var $item = $(this).parent().next().find('.item');
  40.           $('option', $item).remove();
  41.           $.each(eval(cat), function(i,v){
  42.           $('<option value="'+v+'">'+v+'</option>').appendTo($item);
  43.           });
  44.       });
  45.       $('.cat').change();
  46.       
  47.       $(':button').on('click', function(){ $('#table').find('tr:first').clone().find('.cat').val(function(){
  48.               return $(this).val();
  49.           }).end().appendTo('#table');
  50.       });
  51.   });
  52.   
  53.   $(document).ready(function() {
  54.     $("#itemType_id").change(function(){
  55.       $("#country_hidden").val(("#itemType_id").find(":selected").text());
  56.     });
  57.   });

  59. </script>
  60. <script type="text/javascript">

  62.    function addRow(tableID)
  63.    {    
  64.        //return false; // Prevent page refresh
  65.        var table = document.getElementById(tableID);
  66.        var rowCount = table.rows.length;
  67.        var row = table.insertRow(rowCount);
  68.        var colCount = table.rows[0].cells.length;
  69.        for(var i=0; i<colCount; i++) {
  70.           var newcell = row.insertCell(i);
  71.           newcell.innerHTML = table.rows[0].cells[i].innerHTML;
  72.           //alert(newcell.childNodes);
  73.           switch(newcell.childNodes[0].type) {
  74.              case 'text':
  75.                 newcell.childNodes[0].value = '';
  76.                 break;
  77.              case 'checkbox':
  78.                 newcell.childNodes[0].checked = false;
  79.                 break;
  80.              case 'select-one':
  81.                 newcell.childNodes[0].selectedIndex = 0;
  82.                 break;
  83.           }
  84.        }
  85.        var frm = document.getElementsByName('leave');
  86.        //frm.submit(); // Submit
  87.        frm.reset();  // Reset 
  88.     }
  89. </script>

  91. </body>
  92. </html>