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，在你的html中添加一个容器id="id"

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

DEMO

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>');

通常附加一个容器，因为#id与一个按钮相关联，所以它不起作用。如果您仍想使用追加，请使用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 个答案: