jquery - creating table header with javascript -

i having 2 issues table, 1 of them want show when click button when shows , hides , other how send parameter based on select option createtable function part of code

<form class="form-inline" role="form"> <select multiple class="form-control" style = "width:250px"id = "theselect">         <option selected disabled> chose number </option>         <option> </option>         <option> 1 </option>         <option> 2 </option>     </select>        <button type="submit" id = "load" class="btn btn-default">load</button> </form>  <div id ="test">    </div>  <script type = "text/javascript"> $(document).ready(function(){     $("#example").hide();     $("#load").click(function(e){          $("#example").show();      }); });  function createtable(param){    var contents = "<table id='example' class='display' cellspacing='0' width='100%' border>";     ....    ....     $('#test').append(contents); append div  } $(document).ready(createtable(1));   </script> 

thank you

take @ example. gets selected values, , inserts them table, , table dom... hth.

$(document).ready(function(){      $("#load").click(function(e){          var bits = $('#theselect').val();          $("#example").hide();          $('#test').html('');          createtable(bits)          $("#example").show();      });  });    function createtable(param){     var contents = "<table id='example' class='display' cellspacing='0' width='100%' border><tbody><tr><td>"+param+"</td></tr></tbody></table>";        $('#test').append(contents)  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <select multiple class="form-control" style = "width:250px"id = "theselect">      <option selected disabled> chose number </option>      <option> </option>      <option> 1 </option>      <option> 2 </option>  </select>    <button id = "load" class="btn btn-default">load</button>    <div id ="test"></div>