无法通过Jquery动态添加下拉菜单

Question

听起来很琐碎，但我做不到。

这是简单的代码：我在这里做什么？

好像我误解了功能吗？ 如果是，请纠正我。

 <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>

Answer 1

您的身体中没有容纳新添加的select容器/元素，像这样用id="id"在html中添加一个容器

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

演示

Answer 2

文档中是否存在#id ？

是否要将<option>添加到<select> ？

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

小提琴-http: //jsfiddle.net/XVmuZ/

如果要将其添加到#id确保它存在（如rahul的回答中所述）

小提琴-http: //jsfiddle.net/XVmuZ/1/

Answer 3

考虑您自己的代码，您可以简单地编写

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

通常append与容器一起使用，因为#id与按钮相关联，因此它将不起作用。 如果仍要使用append，则使用div / span，但如果不想，请使用.after（）可以正常工作。

Answer 4

首先，不要使用“提交”按钮，因为它将回发您的页面，因此jquery无法正常工作。 试试这个代码

<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>

无法通过Jquery动态添加下拉菜单

问题描述

4 个解决方案

解决方案1
1 2012-11-22 06:59:40

解决方案2
1 2012-11-22 07:01:15

解决方案3
1 已采纳 2012-11-22 08:00:58

解决方案4
0 2012-11-22 07:14:31

无法通过Jquery动态添加下拉菜单

问题描述

4 个解决方案

解决方案1 1 2012-11-22 06:59:40

解决方案2 1 2012-11-22 07:01:15

解决方案3 1 已采纳 2012-11-22 08:00:58

解决方案4 0 2012-11-22 07:14:31

解决方案1
1 2012-11-22 06:59:40

解决方案2
1 2012-11-22 07:01:15

解决方案3
1 已采纳 2012-11-22 08:00:58

解决方案4
0 2012-11-22 07:14:31