locked
Unable to increase the width of html drop-downs which are in Juqery data table RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I have drop-downs in my Jquery Data table and I tried the below css , But I found no luck.

    Can any one suggest me how what's wrong .

    select#txtparticipateidvalue{width:280%;
    }
    .txtparticipateidvalue select
    {width:60px !important;
    }


     

    Thursday, April 19, 2018 2:32 PM

Answers

  • User-571605279 posted

    <!DOCTYPE html>
    <html>
      <head>
    <style>
         
    #example select
    {
        width:40px;
    }
    table tr td #hello {
       width:100px;
    }
    </style>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
          $(document).ready(function() {
            $('#example').DataTable({
              "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
              initComplete: function() {
                this.api().columns().every(function() {
                  var column = this;
                     var select = $('<select><option value=""></option></select>')
                      .appendTo($(column.header()))
                      .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                        );
                        column
                          .search(val ? '^' + val + '$' : '', true, false)
                          .draw();
                      });
                    column.data().unique().sort().each(function(d, j) {
                      select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
              }
            });
            $("textarea").on("keyup", check)
          });
    
          function check() {
            var el = this;
            setTimeout(function() {
              el.style.cssText = 'height:auto; padding:0';
              el.style.cssText = 'height:' + el.scrollHeight + 'px';
            }, 0);
          }
    function submitvallues(button)
    {
             debugger;
             		var dropdownvalue="saab";
                var row=$(button).closest('tr');
                var dynamicdropdown = $("#cars").clone().val(dropdownvalue);
                dynamicdropdown.attr("id","hello");
                row.find('td:eq(3)').html(dynamicdropdown);
                return false;
    }
        </script>
      </head>
    
      <body>
      
      <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
              <th>Cars</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              
    <td></td>
              </tr>
            <tr>
           	 <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Garrett Winters</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              
    <td></td>
             </tr>
            <tr>
            	<td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Airi Satou</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              
    <td></td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
             <th>Cars</th>
             </tr>
          </tfoot>
        </table>
      </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 20, 2018 7:51 PM

All replies

  • User-369506445 posted

    hi

    please try below code :

    <style>
        #resizing_select {
      width: 50px;
    } 
     
    #width_tmp_select{
      display : none;
    } 
    </style>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
    <script>
        $(document).ready(function () {
            $('#resizing_select').change(function () {
                $("#width_tmp_option").html($('#resizing_select option:selected').text());
                $(this).width($("#width_tmp_select").width());
            });
        });
    </script>
    <select id="resizing_select">
        <option>All</option>
        <option>Longer</option>
        <option>A very very long string...</option>
    </select>
    
    <select id="width_tmp_select">
        <option id="width_tmp_option"></option>
    </select>

    Thursday, April 19, 2018 4:03 PM
  • User-1838255255 posted

    Hi Beginer,

    According to your description and code, i think this issue is related to the selector of the element, maybe you can not access the dropdownlist, you could try to use class instead of ID or post your html code. 

    I make a sample in my side, it works, please check: 

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <style>
            .tdsel {
                width: 130px;
            }
        </style>
        <script>
            $(document).ready(function () {
                $('#example').DataTable();
            });
        </script>
    </head>
    <body>
        <table id="example" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Option</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Cedric Kelly</td>
                    <td>Senior Javascript Developer</td>
                    <td>Edinburgh</td>
                    <td>22</td>
                    <td>2012/03/29</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Airi Satou</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>33</td>
                    <td>2008/11/28</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Hope Fuentes</td>
                    <td>Secretary</td>
                    <td>San Francisco</td>
                    <td>41</td>
                    <td>2010/02/12</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Vivian Harrell</td>
                    <td>Financial Controller</td>
                    <td>San Francisco</td>
                    <td>62</td>
                    <td>2009/02/14</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Timothy Mooney</td>
                    <td>Office Manager</td>
                    <td>London</td>
                    <td>37</td>
                    <td>2008/12/11</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Jackson Bradshaw</td>
                    <td>Director</td>
                    <td>New York</td>
                    <td>65</td>
                    <td>2008/09/26</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Olivia Liang</td>
                    <td>Support Engineer</td>
                    <td>Singapore</td>
                    <td>64</td>
                    <td>2011/02/03</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Bruno Nash</td>
                    <td>Software Engineer</td>
                    <td>London</td>
                    <td>38</td>
                    <td>2011/05/03</td>
                    <td>
                        <select class="tdsel">
                            <option>One</option>
                            <option>Two</option>
                        </select>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
        </table>
    </body>

    Best Regards,

    Eric Du 

    Friday, April 20, 2018 7:23 AM
  • User-571605279 posted

    Sir,

    Please find the below code . On my edit button I am able to create the drop-down in table ,But I am unable to set the width of it.

    <!DOCTYPE html>
    <html>
      <head>
    <style>
         
    #example select
    {
        width:40px !important;
    }
    #example #hello select{
       width:250px;
    }
    </style>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
          $(document).ready(function() {
            $('#example').DataTable({
              "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
              initComplete: function() {
                this.api().columns().every(function() {
                  var column = this;
                     var select = $('<select><option value=""></option></select>')
                      .appendTo($(column.header()))
                      .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                        );
                        column
                          .search(val ? '^' + val + '$' : '', true, false)
                          .draw();
                      });
                    column.data().unique().sort().each(function(d, j) {
                      select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
              }
            });
            $("textarea").on("keyup", check)
          });
    
          function check() {
            var el = this;
            setTimeout(function() {
              el.style.cssText = 'height:auto; padding:0';
              el.style.cssText = 'height:' + el.scrollHeight + 'px';
            }, 0);
          }
    function submitvallues(button)
    {
             debugger;
             		var dropdownvalue="saab";
                var row=$(button).closest('tr');
                var dynamicdropdown = $("#cars").clone().val(dropdownvalue);
                dynamicdropdown.attr("id","hello");
                row.find('td:eq(3)').html(dynamicdropdown);
                return false;
    }
        </script>
      </head>
    
      <body>
      
      <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
              <th>Cars</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              
    <td></td>
              </tr>
            <tr>
           	 <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Garrett Winters</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              
    <td></td>
             </tr>
            <tr>
            	<td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Airi Satou</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              
    <td></td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
             <th>Cars</th>
             </tr>
          </tfoot>
        </table>
      </body>
    </html>

    Friday, April 20, 2018 9:57 AM
  • User-369506445 posted

    you have a mistake in your code. you set the drop-down width with css class. i removed them and completed your code .

    in below code when you click on submit button first create a drop-down dynamically and after that if you change it , you can see the drop-down list be change 

    please first try below code and if it was correct then change it based on your need

    <!DOCTYPE html>
    <html>
      <head>
    <style>
         
     
     
    </style>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                $('#example').DataTable({
                    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                             .appendTo($(column.header()))
                             .on('change', function () {
                                 var val = $.fn.dataTable.util.escapeRegex(
                                   $(this).val()
                                 );
                                 column
                                   .search(val ? '^' + val + '$' : '', true, false)
                                   .draw();
                             });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    }
                });
                $("textarea").on("keyup", check);
            });
    
            function check() {
                var el = this;
                setTimeout(function () {
                    el.style.cssText = 'height:auto; padding:0';
                    el.style.cssText = 'height:' + el.scrollHeight + 'px';
                }, 0);
            }
            function submitvallues(button) {
                debugger;
                var dropdownvalue = "saab";
                var row = $(button).closest('tr');
                var dynamicdropdown = $("#cars").clone().val(dropdownvalue);
                dynamicdropdown.attr("id", "hello");
                row.find('td:eq(3)').html(dynamicdropdown);
                checkDropDown();
                return false;
            }
        </script>
          
          
          <style>
            #hello{
                width: 50px;
            }
    
            #width_tmp_select {
                display: none;
            }
            table tr td {
                width: 200px;
            }
        </style>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script>
             function checkDropDown() {
                 $('select').each(function () {
                     $(this).change(function () {
                         
                         $("#width_tmp_option").html($("option:selected", this).text());
                         $(this).width($("#width_tmp_select").width());
                          
    
                     });
                 });
             }
        </script>
      </head>
    
      <body>
      
      <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
              <th>Cars</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              
    <td></td>
              </tr>
            <tr>
           	 <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Garrett Winters</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              
    <td></td>
             </tr>
            <tr>
            	<td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Airi Satou</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              
    <td></td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
             <th>Cars</th>
             </tr>
          </tfoot>
        </table>
          <select id="width_tmp_select">
            <option id="width_tmp_option"></option>
        </select>
      </body>
    </html>

    Friday, April 20, 2018 10:57 AM
  • User-571605279 posted

    I don't no why you had written the below logic and also added one more drop-down.
    Can't I make the existing "Cars" dropdown

    function checkDropDown()
    {
                 $('select').each(function () {
                     $(this).change(function () {
                         
                         $("#width_tmp_option").html($("option:selected", this).text());
                         $(this).width($("#width_tmp_select").width());
                          
    
                     });
                 });
    }

    Friday, April 20, 2018 12:25 PM
  • User-369506445 posted
    function checkDropDown()
    {
                 $('select').each(function () {
                     $(this).change(function () {
                         
                         $("#width_tmp_option").html($("option:selected", this).text());
                         $(this).width($("#width_tmp_select").width());
                          
    
                     });
                 });
    }

    above script is for when you change drop-down items . and when change it . increase or decease the option width.

    and also added one more drop-down.

    the additional drop-down is as template for all Drop-down .if you see the script first add the option text to additional dropdown then get width that and finally change the current drop-down width

    Can't I make the existing "Cars" dropdown

    if your mean was Why didn't change . you can try below code :

    <!DOCTYPE html>
    <html>
      <head>
    <style>
         
     
     
    </style>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function () {
                checkDropDown();
                $('#example').DataTable({
                    "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
                    initComplete: function () {
                        this.api().columns().every(function () {
                            var column = this;
                            var select = $('<select><option value=""></option></select>')
                             .appendTo($(column.header()))
                             .on('change', function () {
                                 var val = $.fn.dataTable.util.escapeRegex(
                                   $(this).val()
                                 );
                                 column
                                   .search(val ? '^' + val + '$' : '', true, false)
                                   .draw();
                             });
                            column.data().unique().sort().each(function (d, j) {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            });
                        });
                    }
                });
                $("textarea").on("keyup", check);
            });
    
            function check() {
                var el = this;
                setTimeout(function () {
                    el.style.cssText = 'height:auto; padding:0';
                    el.style.cssText = 'height:' + el.scrollHeight + 'px';
                }, 0);
            }
            function submitvallues(button) {
                debugger;
                var dropdownvalue = "saab";
                var row = $(button).closest('tr');
                var dynamicdropdown = $("#cars").clone().val(dropdownvalue);
                dynamicdropdown.attr("id", "hello");
                row.find('td:eq(3)').html(dynamicdropdown);
                checkDropDown();
                return false;
            }
        </script>
          
          
          <style>
            #hello{
                width: 50px;
            }
    
            #width_tmp_select {
                display: none;
            }
            table tr td {
                width: 200px;
            }
        </style>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
        <script>
             function checkDropDown() {
                 $('select').each(function () {
                     $(this).change(function () {
                         
                         $("#width_tmp_option").html($("option:selected", this).text());
                         $(this).width($("#width_tmp_select").width());
                          
    
                     });
                 });
             }
        </script>
      </head>
    
      <body>
      
      <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
              <th>Cars</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              
    <td></td>
              </tr>
            <tr>
           	 <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Garrett Winters</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              
    <td></td>
             </tr>
            <tr>
            	<td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Airi Satou</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              
    <td></td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
             <th>Cars</th>
             </tr>
          </tfoot>
        </table>
          <select id="width_tmp_select">
            <option id="width_tmp_option"></option>
        </select>
      </body>
    </html>

    Friday, April 20, 2018 12:43 PM
  • User-571605279 posted

    <!DOCTYPE html>
    <html>
      <head>
    <style>
         
    #example select
    {
        width:40px;
    }
    table tr td #hello {
       width:100px;
    }
    </style>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script>
          $(document).ready(function() {
            $('#example').DataTable({
              "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
              initComplete: function() {
                this.api().columns().every(function() {
                  var column = this;
                     var select = $('<select><option value=""></option></select>')
                      .appendTo($(column.header()))
                      .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                          $(this).val()
                        );
                        column
                          .search(val ? '^' + val + '$' : '', true, false)
                          .draw();
                      });
                    column.data().unique().sort().each(function(d, j) {
                      select.append('<option value="' + d + '">' + d + '</option>')
                    });
                });
              }
            });
            $("textarea").on("keyup", check)
          });
    
          function check() {
            var el = this;
            setTimeout(function() {
              el.style.cssText = 'height:auto; padding:0';
              el.style.cssText = 'height:' + el.scrollHeight + 'px';
            }, 0);
          }
    function submitvallues(button)
    {
             debugger;
             		var dropdownvalue="saab";
                var row=$(button).closest('tr');
                var dynamicdropdown = $("#cars").clone().val(dropdownvalue);
                dynamicdropdown.attr("id","hello");
                row.find('td:eq(3)').html(dynamicdropdown);
                return false;
    }
        </script>
      </head>
    
      <body>
      
      <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
    </select>
    
        <table id="example" class="display" style="width:100%">
          <thead>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
              <th>Cars</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Tiger Nixon</td>
              <td>System Architect</td>
              
    <td></td>
              </tr>
            <tr>
           	 <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Garrett Winters</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Ashton Cox</td>
              <td>Junior Technical Author</td>
              
    <td></td>
             </tr>
            <tr>
            	<td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Cedric Kelly</td>
              <td>Senior Javascript Developer</td>
              
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Airi Satou</td>
              <td>Accountant</td>
               
    <td></td>
            </tr>
            <tr>
              <td><input type="button" value="Submit" id="btnsubmitvlaue"  onclick="submitvallues(this)" ></td>
              <td>Brielle Williamson</td>
              <td>Integration Specialist</td>
              
    <td></td>
            </tr>
           </tbody>
          <tfoot>
            <tr>
              <th>Edit</th>
              <th>Name</th>
              <th>Position</th>
             <th>Cars</th>
             </tr>
          </tfoot>
        </table>
      </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 20, 2018 7:51 PM