使用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添加多個選擇元素創建選擇框

回答

相關問題