CODEWITHSUNDEEP
jqueryhtmlhtml-select
SJJ
SJJ

Reputation: 31

jQuery won't display drop down menu

Please be aware I am a web dev noob. I'm trying to use jquery to display options from 1-20 in my drop down menus but they are not appearing when i run the html. Instead an empty select menu is displayed.

Here's the code:

            $(function(){
                var $select = $(".1-20");
                for (i=1;i<=20;i++){
                    $select.append($('<option></option>').val(i).html(i))
                }
            });​

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<th>Max</th>
                <th>Comments</th>
                <th>Mark</th>
            </tr>
            <tr>
                <td>Dyanmic Table</td>
                <td>20</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
                    <select class = "1-20"></select>
                </td>
            </tr>
            <tr>
                <td>Intellij Usage</td>
                <td>10</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
                    <select class = "1-20"></select>
                </td>
            </tr>
            <tr>
                <td>Calendar control</td>
                <td>30</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
            <tr>
                <td>Dyanmic Table</td>
                <td>20</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
                    <select class = "1-20"></select>
                </td>
            </tr>
                </td>
            </tr>
            <tr>
                <td>Active form</td>
                <td>20</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
                    <select class = "1-20"></select>
                </td>
            </tr>
            <tr>
                <td>Object database</td>
                <td>20</td>
                <td>
                    <textarea> Enter comments</textarea>
                </td>
                <td>
                    <select class = "1-20"></select>
                </td>
            </tr>
        </table>
    </div>

Upvotes: 0

Views: 36

Answers (2)

Baezid Mostafa
Baezid Mostafa

Reputation: 2728

After script end ";" there is an unknown/ invalid character showing. I already comment out on answer where its showing. you can copy your script and past to jsfiddle for test. Here is error on jsfiddle 

   

 <!DOCTYPE html>
    <html>
    <head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script>
       $(function(){
        var $select = $(".1-20");
        for (i=1;i<=20;i++){
            $select.append($('<option></option>').val(i).html(i))
         }
      });<!--here is an unknow character showing on [ https://jsfiddle.net/3zxmbdtp/ ] if you copy this script -->
     </script>
    </head>
     <body>
      <div id = "table">
      <table style="width:100%">
        <tr>
            <th>Section</th>
            <th>Max</th>
            <th>Comments</th>
            <th>Mark</th>
        </tr>
        <tr>
            <td>Dyanmic Table</td>
            <td>20</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
                <select class = "1-20"></select>
            </td>
        </tr>
        <tr>
            <td>Intellij Usage</td>
            <td>10</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
                <select class = "1-20"></select>
            </td>
        </tr>
        <tr>
            <td>Calendar control</td>
            <td>30</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
        <tr>
            <td>Dyanmic Table</td>
            <td>20</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
                <select class = "1-20"></select>
            </td>
        </tr>
            </td>
        </tr>
        <tr>
            <td>Active form</td>
            <td>20</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
                <select class = "1-20"></select>
            </td>
        </tr>
        <tr>
            <td>Object database</td>
            <td>20</td>
            <td>
                <textarea> Enter comments</textarea>
            </td>
            <td>
                <select class = "1-20"></select>
            </td>
         </tr>
      </table>
     </div>
    </body>
   </html>

Upvotes: 1

Flash Thunder
Flash Thunder

Reputation: 12045

<script src="../../../../js/jquery.js"></script>
<script>
    $(function(){
        var $select = $(".1-20");
        for (i=1;i<=20;i++){
            $select.append($('<option></option>').val(i).html(i))
        }
    });​
</script>

Upvotes: 0

Related Questions