Unable to dynamically add dropdown menu through Jquery

Question

It may sound trivial but I am unable to do it.

Here is the simple code : what's wrong I am doing here ?

Is it like I have misunderstood the function? If yes, please correct me.

 <html>
  <head>
   <script type="text/javascript" src="jquery.js"></script>                             
    <script type="text/javascript">
      $(document).ready(function(){
       $(".button").click(function(){
        jQuery('#id').append('<select></select>');
       });     
      });
   </script>
  </head>

  <body >
    <input type="submit" class="button" id="id" value="submit"/>
  </body>

where do you expect the select to be placed? you have to provide a valid selector for an element in the page — charlietfl
– charlietfl, Commented Nov 22, 2012 at 6:57
What do you means by #id in the code.Provide valid id to append dropdown — Hemantwagh07
– Hemantwagh07, Commented Nov 22, 2012 at 6:59
Your code is not working because you are trying to insert the select in your input element. Create a new <div id="select-list" container and append your select to it. — Alex
– Alex, Commented Nov 22, 2012 at 7:23

Rahul · Accepted Answer · 2012-11-22 08:00:58Z

1

considering your own code you can simply write

$('#id').after('<select></select>');

generally append works with a container since #id is associated with a button so it will not work. use div/span if you still want to use append, but if you don't want to .after() works fine.

answered Nov 22, 2012 at 8:00

Rahul

9885 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

rahul · Accepted Answer · 2012-11-22 06:59:40Z

1

you have no container/element in your body that will hold the newly added select, add a container in your html like this with id="id"

<body >
     <div id="id">
     </div>
    <input type="submit" class="button" value="submit"/>
</body>

DEMO

answered Nov 22, 2012 at 6:59

rahul

7,6738 gold badges42 silver badges55 bronze badges

Comments

Atif · Accepted Answer · 2012-11-22 07:01:15Z

1

Does #id exists in the document?

Do you want to add <option> to <select> ?

$(document).ready(function() {
    $(".button").click(function() {
        jQuery('body').append('<select><option value="1">One</option><option value="2">Two</option></select>');
    });
});

Fiddle - http://jsfiddle.net/XVmuZ/

If you want to add it to #id then make sure it exists (like in rahul's answer)

Fiddle - http://jsfiddle.net/XVmuZ/1/

answered Nov 22, 2012 at 7:01

Atif

10.9k22 gold badges68 silver badges97 bronze badges

Comments

Ankush Jain · Accepted Answer · 2012-11-22 07:14:31Z

0

fisrt thing don't use submit button because it will postback your page so jquery will not work. try this code

<html>
  <head>
   <script type="text/javascript" src="jquery.js"></script>                             
    <script type="text/javascript">
      $(document).ready(function(){
       $(".button").click(function(){
        $('#ddl').append('<select><option>abc</option><option>def</option></select>');
       });     
      });
   </script>
  </head>

  <body >
    <input type="button" class="button" id="id" value="submit"/>
    <div id="ddl">
    </div>
  </body>

answered Nov 22, 2012 at 7:14

Ankush Jain

1,5271 gold badge15 silver badges24 bronze badges

Collectives™ on Stack Overflow

Unable to dynamically add dropdown menu through Jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related