如何在数据表的每一行中添加下拉列表

Question

I have a datatable with 3 columns : Username, email and role. In the header of 3rd column (role), there is a button "Edit". On clicking "Edit", I want dropdown menu should come on each row. "Edit" button should be hidden and "Save" button should come up. Using the following code, I am able to add dropdown menu, but I am not able to select anything from dropdown menu.

<script type="text/javascript">
$(document).ready(
    function() {
    var oTable = $('#big_table').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": '<?php echo base_url(); ?>index.php/User/datatable',
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "iDisplayStart ":20,
    "oLanguage": {
    "sProcessing": "<img src='<?php echo base_url(); ?>assets/images/ajax-loader_dark.gif'>"
    },  

    "aoColumnDefs": [
         { "bSortable": false, "aTargets": [ 2 ] }
        ],      

    "fnInitComplete": function() {
       $("#big_table tr").find("th:nth-child(3)").append('<button id = "editTool">Edit</button><button id = "save"> Save </button>');      
            $("#save").hide();
     },
     "fnDrawCallback": function() {
                },
    "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            },
            'fnServerData': function(sSource, aoData, fnCallback)
        {
          $.ajax
          ({
            'dataType': 'json',
            'type'    : 'POST',
            'url'     : sSource,
            'data'    : aoData,
            'success' : fnCallback
          });
        }
} );
$("#big_table").on('click',$("#editTool"),function(){
        console.log("editTool click");
            console.log("Edit");
            $("#big_table tbody tr").each(function(index){
            var selected = "Admin1";
            var name = "role"+index;
            var menu = '<?php 
            $options = array(
                'Student'       => 'Student',
                'Contributer'   => 'Contributer',
                'Moderator'     => 'Moderator',
                'Admin1'        => 'Admin 1', 
                'Admin2'        => 'Admin 2',
             );
            $selected = "'+selected+'";
            $val =  form_dropdown("'+name+'", $options,"'+selected+'");
            echo preg_replace( "/\r|\n/","",$val)?>';
            $(this).find("td:nth-child(3)").html(menu);
            $("#editTool").hide();
            $("#save").show();
         });
     });

} );
</script>

Answer 1

I got the problem. The problem lies with the following code:

    $("#big_table").on('click',$("#editTool"),function(){
      //codes
    });

This is triggered each time we click on #big_table. For the first time, when I click on "edit" button, this method is called and the dropdown box is getting added. When I try to select something from dropdown, this method is invoked once again, because the click is still on #bigTable. I solved this issue by replacing the above by following:

   $("#big_table thead th:nth-child(3)").on('click',$("#editTool"),function(){
    //code
    });

Now this method is invoked whenever third header is clicked. So now I can properly select from the dropdown menu. But still my goal is not achieved. I want this method to invoked, when "edit" button is clicked, not when the column header is clicked. Please suggest some solution.