使用jQuery添加多个选择元素创建选择框

我张贴HTML和jQuery代码。使用JQuery 1.9.1。使用jQuery添加多个选择元素创建选择框

SCRIPT

$(document).ready(function() { 
    $('#search').keyup(function() { 

     var search = $('#search').val(); 

     if (search.length > 2) { 
      var s = $('<select />'); 
      $.ajax({ 
       type: "POST", 
       url: "searchuser", 
       cache: false, 
       data: 'search=' + $("#search").val(), 
       success: function (response) { 

        $.each(response, function (index, value) { 
         $('<option />', { 
          value: value, 
          text: value 
         }).appendTo(s); 
        }); 

       }, 
       error: function (e) { 
        alert('Error: ' + e); 
       } 

      }); 
     } 

     s.appendTo('body'); 
    }); 
});

HTML

<form> 
     <input id="search" type="text" name="search" /> 
    </form> 
    <div id="info"></div> 

    <div id="other"> 
     Trigger the handler 
    </div>

和上面的代码是创建我理解多个选择元件，这是由于AJAX调用，但如何避免产生额外的选择元素或建议我如何转换文本框来选择项目

来源

2013-05-31 Ganesh

当您发布的代码，给人的jsfiddle链路始终是一个很好的方式，以获得更快的答案:) – TecHunter

我不能，因为我有一个请求，这是来自数据库，所以它会发布错误，但只是为了清楚了解Java脚本和HTML我张贴我的jsfiddel链接http://jsfiddle.net/Pkgje/ – Ganesh

在jsfiddle你有一些不错的回声框架阿贾克斯请求，我会张贴你一个 – TecHunter

您只需要创建select元素一次然后追加所有内容，或者您可以使用.replaceWith。

如果没有特别需要创建选择元件上的飞，它甚至不如把直接在html：

<body> 

    <form> 
     <input id="search" type="text" name="search" /> 
    </form> 
    <div id="info"></div> 

    <div id="other"> 
     Trigger the handler 
    </div> 
    <select id="searchSelectTarget"> 
    </select> 

</body>

虽然在JS要小心使用Ajax，它是异步的最当时的.appendTo将AJAX返回之前执行：

$('#search').keyup(function() { 

    var search = $('#search').val(); 

    if (search.length > 2) { 
     var $select = $('#searchSelectTarget').empty(); //just to reset the content 
     $.ajax({ 
      type: "POST", 
      url: "searchuser", 
      cache: false, 
      data: 'search=' + $("#search").val(), 
      success: function (response) { 

       $.each(response, function (index, value) { 
        $('<option />', { 
         value: value, 
         text: value 
        }).appendTo($select); 
       }); 
// s.appendTo('body'); this one would have moved here but you don't need it anymore 
      }, 
      error: function (e) { 
       alert('Error: ' + e); 
      } 

     }); 
    } 


});

来源

2013-05-31 09:21:46 TecHunter

非常感谢你@TecHunter它工作正常，但我可以将输入标签转换为选择框 – Ganesh

我想创建一个具有相同名称和编号作为输入字段的选择框我可以 – Ganesh

@ user1654561你的意思是什么时候你的请求回来删除输入并将其替换为select？ – TecHunter

使用jQuery添加多个选择元素创建选择框

回答

相关问题