多選控件jQuery UI

我有一個輸入在HTML頁面中運行。我正在使用jQuery UI。我希望用戶在輸入中鍵入一些文本，然後一旦他按下Enter鍵，輸入將變爲空白，並且他輸入的文本將顯示在下方，並在其旁邊顯示X.這將允許用戶輸入許多選項，然後通過單擊相應的X按鈕來刪除其中的任何選項。我附加了什麼，我想實現一個例證：多選控件jQuery UI

是否有一個jQuery UI控件，可以幫助我做到這一點？如果不是，你會怎麼做？

謝謝！

來源

2010-12-15 Ron

沒有必要jQuery插件這個的，你可以僅僅指剛做與jquery，它應該是非常簡單 – kobe 2010-12-15 07:20:20

HTML：

<form id="input_text"> 
    <input id="add_text" type="text"> 
</form> 
<div id="results"></div>

的JavaScript（在文件準備好）：

var addText = $("#add_text"); 
var results = $("#results"); 

$(".remover").live("click", function() { 
    $(this).parent("div").remove(); 
    return false; 
}); 

$("#input_text").submit(function() { 
    var newText = $.trim(addText.val()); 
    if (newText) { 
     results.append('<div><a href="#" class="remover">x</a> ' + newText + '</div>'); 
    } 
    addText.val("").focus(); 
    return false; 
});

完整的解決方案： http://jsfiddle.net/QduEQ/

來源

2010-12-15 07:55:48 dyve

很好的例子，我想寫在jsfiddle，但放棄了，只是給了他一些僞代碼... + 1爲您的解決方案 – kobe 2010-12-15 08:07:33

我可以給一個想法如何做到這一點，如果你確定jquery。

1）使用輸入框創建表單。

2）創建一個表單，單擊事件//返回FLASE不提交表單

$('#target').submit(function() { 
    // get the inputs text by using .val() on input 
    // set the value to the label defined // add label dynamically or a div tag or a span tag , anything should be fine 
    // make one more x image along with label 
    return false; 

});

3）給出一個類名的圖像，並且多了一個點擊事件圖像

$('.Imageclass').live('click', function() { 
     remove the label or hide it using jquery selector 
});

我給了僞代碼類的東西，這應該幾乎你想要的

來源

2010-12-15 07:25:18 kobe

你可以通過操縱DOM中的選擇控件來做到這一點。你需要做的是爲選擇控件創建一個「包裝器」。控件本身將隱藏在頁面上。包裝將是一個帶有輸入字段的div和一個向下的箭頭，它會顯示一個下拉式div與您當前選擇的項目。當用戶輸入新項目時，將其添加到隱藏的選擇控件中。當他們刪除它時，你也從隱藏的選擇中刪除它。這基本上是一般的想法。

來源

2010-12-15 07:40:55

多選控件jQuery UI

回答

相關問題