麻烦在jquery中将两个代码构建成一个代码

时间:2014-01-25 09:15:59

标签: jquery

  <script type="text/javascript">
      var arr = [{
  val: 1,
  text: 'Option 1'
         }, {
  val: 2,
  text: 'Option 2'
        }];
         $(function () {
   $('a').click(function () {
      var sel = $('<select>').appendTo('body');
      $(arr).each(function () {
          sel.append($("<option>").val(this.val).text(this.text));
      });
      $('<br>').insertBefore(sel);
      $('<input/>').insertAfter(sel);
      return false;
  });
           });
          </script>

      </head>

      <body>

   <a href="">Add Select Box</a>

这是我的第一个代码.....它的作用是每当我点击锚标签时它会显示一个带选项的选择框 - 选项1和选项2,如上所示......

现在我的第二个代码如下...... 它的作用是在页面加载时它显示一个选择框,显示从数据库中获取的值....

<script type="text/javascript">
           $(function(){
      var items="";
      $.getJSON("index_two.php",function(data){
        $.each(data,function(index,item) 
        {
          items+="<option value='"+item.sno+"'>"+item.name+"</option>";
        });
        $("#a1_title").html(items); 
      });
          });



                </script>

              <select id="a1_title">
              <option>Default</option>
             </select>

在这段代码中index_two.php是页面的名称,我写了我的选择查询,从数据库中取值...现在我想合并我的这两个代码...就像我点击锚标签一样在第一个代码中,它显示一个选择框,但是从数据库中获取值...这两个代码在我单独运行时工作正常,但是当我把它们放在一起时没有工作...有人建议我一个方法.... ??

1 个答案:

答案 0 :(得分:0)

试试这个:

 $(function(){ 
     var items="";

     $('a').click(function (e) {
        e.preventDefault();  //<--------use this instead of 'return false;'
        var sel = $('<select id="a1_title">').appendTo('body');

        $.getJSON("index_two.php",function(data){
          $.each(data,function(index,item) { 
            items+="<option value='"+item.sno+"'>"+item.name+"</option>";
          });

          $("#a1_title").html(items); 

        }); // getjson ends

     }); // click ends
 }); // doc ready ends

在我看来,您已将数据置于return false;以下,因此如果是这种情况,则只要您return false,脚本执行就会停止,因此我建议您按照建议使用e.preventDefault();在答案中。