動態添加選項以選擇選擇多個JQuery插件

我想添加用戶在所選擇的多個輸入的文本字段中輸入的文本作爲選項，並自動選擇它，當選項沒有時，所有這些存在，如果選項存在，那麼我想選擇它。到目前爲止，我已經能做到這一點：動態添加選項以選擇選擇多個JQuery插件

Chosen.prototype.add_text_as_option = function() { 
    $('#id_select').append(
     $('<option>') 
       .html(this.search_field.val()) 
       .attr('selected', 'selected') 
       .attr('value', 0) 
    ); 
    $('#id_select').trigger("liszt:updated"); 
    return false; 
};

我調用這個函數每當用戶按下回車鍵，輸入字段是keydown_check函數中的焦點。

我有兩個問題：

重中之重，當用戶按下輸入，並鍵入一個選項的子字符串，則該選項未被選中，但子文本將被添加和選擇。不是我想要的。

例如：如果我可以選擇「富」，並開始鍵入「FO」，選擇將迎來第一選項爲候補（「富」），所以如果我按下回車鍵，應選擇，但是相反，當我真的想選擇「foo」時，會發生什麼是「fo」作爲選項被添加並被選中。

如果我點擊選擇「foo」，那麼一切正常。選擇選項標記被選中，子字符串文本作爲選項的一部分。

如何添加一個不存在的選項來選擇，而不會丟失所有原始功能？

我怎樣才能訪問我選擇的多個字段我選擇了在選定的插件內選中？正如您在上面的代碼中看到的，選擇多個字段的ID是硬編碼的。我想這樣做是爲了能夠在用戶添加新選項時刷新選擇。
，我正在尋找的功能非常相似，linkedin

感謝的技能部件提前！

來源

2012-07-31 danielrvt

你似乎在說，當用戶進入一個與現有選項的開頭匹配的值，那麼應該選擇該選項，但是如果它匹配多個選項會怎樣選項？（例如，「fo」會匹配「food」和「football」 - 選擇兩個？） – nnnnnn 2012-07-31 01:36:45

我只想讓用戶選擇他想要的內容，並且在他希望的情況下添加一個新選項。 – danielrvt 2012-07-31 02:00:06

@nnnnnn說+1，但是如果你想添加「fo」又怎麼樣？我認爲這個問題比其他任何東西都更具概念性。看起來你需要機制來（a）準確地添加你輸入的內容，而不管現有的選項，（b）添加一個singleton匹配選項，以及（c）添加從多個匹配中選擇的選項。 – 2012-07-31 02:05:24

您應該嘗試使用基於選定插件的select2插件，但它可以很好地動態添加元素。

繼承人的鏈接：http://ivaynberg.github.com/select2/

看看在自動符號化的例子，我認爲這可能是你在找什麼。

來源

2013-03-28 19:55:01

叫它keyup_check keydown_check被稱爲按下字母被初始化不像keyup_check

來源

2013-11-17 00:00:12 njoshsn

我需要這個，所以今天我寫了這樣的事情之前：

$(function() { 
    // form id 
    $('#newtag').alajax({ 
     // data contains json_encoded array, sent from server 
     success: function(data) { 
      // this is missing in alajax plugin 
      data = jQuery.parseJSON(data); 
      // create new option for original select 
      var opt = document.createElement("OPTION"); 
      opt.value = data.id; 
      opt.text = data.name; 
      opt.selected = true; 
      // check if the same value already exists 
      var el = $('#tags option[value="' + opt.value + '"]'); 
      if(!el.size()) { 
       // no? append it and update chosen-select field 
       $('#tags').append(opt).trigger("chosen:updated"); 
      } else { 
       // it does? check if it's already selected 
       if(!el[0].selected) { 
        // adding already existent element in selection 
        el[0].selected = true; 
        $('#tags').trigger("chosen:updated"); 
       } else { 
        alert("Already selected and added."); 
       } 
      } 


     } 
    }) 
});

「＃」 newtag是一種形式「.alajax」是plugin，它以異步方式發送表單數據並以JSON格式返回服務器響應。在控制器中，我檢查標籤是否存在，否則我創建它。作爲迴應，我使用了五個「jsoned」標籤對象。

來源

2014-11-05 16:07:47

我創建了一個jquery的jsfiddle選擇文本和創建作爲選項。在早期版本的jquery中選擇了設施創建選項。

create_option: true; 
persistent_create_option: true; 
skip_no_results: true;

您可以使用此代碼：

$('#id_select').chosen({ 
    width: '100%', 
    create_option: true, 
    persistent_create_option: true, 
    skip_no_results: true 
});

的jsfiddle鏈接：https://jsfiddle.net/n4nrqtek/

來源

2016-12-20 06:51:59

我找到了解決方法多選擇

var str_array = ['css','html']; 
$("#id_select").val(str_array).trigger("chosen:updated");

來源

2018-01-25 22:54:31

動態添加選項以選擇選擇多個JQuery插件

回答

相關問題