By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
464,486 Members | 1,199 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 464,486 IT Pros & Developers. It's quick & easy.

creating a table from a dropdown box option values

P: 1
Hi

I'm trying to show a table based on what choice is made from a drop down box.the table will have two columns and
the selected value of the table will be the number of rows of the table with additional row for heading of tables

Expand|Select|Wrap|Line Numbers
  1. <select name="dropdown" size="1">
  2. <option selected value="">Please make a selection</option>
  3. <option value="10">Choice 10</option>
  4. <option value="8">Choice 8</option>
  5. <option value="4">Choice 4</option>
  6.  
  7. </select>
i.e. if Choice 4 is selected I'd like to display a new <tr> with the
following:

Expand|Select|Wrap|Line Numbers
  1. <tr>
  2. <th> Flat No.</th>
  3. <th>  Floor No.</th>
  4. </tr>
  5. <tr>
  6. <td></td>
  7. <td></td>
  8. </tr>
  9. <tr>
  10. <td></td>
  11. <td></td>
  12. </tr>
  13. <tr>
  14. <td></td>
  15. <td></td>
  16. </tr>
  17. <tr>
  18. <td></td>
  19. <td></td>
  20. </tr>

the values of the table will be saved in database after submit.
I want to do this only by using javascript and html and simply but can't achieve what I'm looking for.
Oct 29 '19 #1
Share this Question
Share on Google+
3 Replies

gits
Expert Mod 5K+
P: 5,390
what have you done so far to implement a solution?
Oct 30 '19 #2

P: 70
You can try below code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <title>Document</title>
  5. </head>
  6. <body>
  7.       <select name="dropdown"  id="select1" size="1">
  8.         <option selected value="">Please make a selection</option>
  9.         <option value="10">Choice 10</option>
  10.         <option value="8">Choice 8</option>
  11.         <option value="4">Choice 4</option>
  12.  
  13.         </select>
  14.         <div  id="table"></div>
  15.  
  16.        <input type="button"  id="select" value="submit" onclick="change()"/>
  17.       <script type="text/javascript">
  18.  
  19.       function change() {
  20.         var ans = document.querySelector('#select1');
  21.         var result=ans.value;
  22.  
  23.         document.getElementById("table").innerHTML=get_row(result);
  24.  
  25.  
  26.       }
  27.       function get_row(result)
  28.       {
  29.           var html='<table border="1" height="200px" width="200px">'+
  30.                     '<tr><th> Flat No.</th>'+
  31.                      '<th>  Floor No.</th>'+
  32.                       '</tr>';
  33.           for (let i = 0; i < result ; i++) {
  34.               html=html+'<tr><td></td><td></td></tr>'
  35.                }
  36.                return html;
  37.       }
  38.       </script>
  39.  
  40. </body>
  41. </html>
Feb 7 '20 #3

gits
Expert Mod 5K+
P: 5,390
since the thread was dug out of last year - in case anyone wants to use that shown code - there are some things to be commented:

1. decide whether and when to use var, let const keywords and not mixing them up somehow randomly - just because something works its not always the case its the right way - you could even leave out the variable declarations in that example at all and it would still work - but that would be even worse code then

2. the 1st option in the select-node should be handled differently since it wouldn't make sense to create a table without any row in it

3. using any layout-related properties in html like border, width, height should always be avoided since that should be done by css

overall: don't copy paste code from somewhere into your application - always use it as an example only, understand what is done there and what might be wrong or right. Know what you are doing instead of being just another 'Scriptkiddie'.
Feb 12 '20 #4

Post your reply

Sign in to post your reply or Sign up for a free account.