2013-02-20 106 views
4

http://jsfiddle.net/tXFbk/2/選擇二多選重複值

HTML:

<div class="control-group"> 
    <label for="some_id" class="control-label">Some ID</label> 
    <div class="controls"> 
     <input type="text" id="some_id" name="some_id" class="span4"/> 
    </div> 
</div> 

JS:

$(function() { 
    $('#some_id').select2({ 
     allowClear: true, 
     placeholder: 'Some ID', 
     minimumInputLength: 2, 
     multiple: true, 
     data: [ 
      {id: 1, text: 'some text'}, 
      {id: 2, text: 'some other text'}, 
      {id: 3, text: 'some more text'} 
     ] 
    }); 
    $('#some_id').select2('data', [ 
     {'id':1,'text':'some text'} 
    ]); 

    console.log($('#some_id').select2('val')); 
}); 

在第一負載它重複值和清除值之後,在沒有明確它從輸入。此外,如果您添加一個項目(例如「更多文本」),然後將其刪除,它不會從輸入值中清除它。有沒有辦法讓它停止重複值? 還有一件事 - 如何禁用添加已添加的項目?

+0

你有沒有找到一個答案? – MCB 2015-08-28 17:53:45

回答

0

您需要觸發select2的更改事件以反映更改。

$("#dropdownId").val("yourValues").trigger("change"); 

設定值後,您需要手動觸發的觸發值,以反映您的下拉列表

1

檢查所做的最新變化如下在選擇事件,並且在設置是否新款財產createSearchChoice

讓我知道如果它解決您的問題

$('#some_id').select2({ 
      tags: true, 
      tokenSeparators: [","], 
      createSearchChoice: function (term, data) { 
       if (term.trim().length > 0) { 
        if ($(data).filter(function() { 
         return this.text.toLowerCase().localeCompare(term.toLowerCase()) === 0; 
        }).length === 0) { 
         return { 
          id: term, 
          text: term, 
          isNew: true // this is necessary to check if the item is newly added or not 
         }; 
        } 
       } 
      }, 
      multiple: true, 
      minimumInputLength: 1, 
      allowClear: true, 
      data: [ 
     {id: 1, text: 'some text'}, 
     {id: 2, text: 'some other text'}, 
     {id: 3, text: 'some more text'} 
    ], 
     }).on("select2-selecting", function (e) { 
      var tagId = ''; 
      if (e.choice.isNew) { 
       self.AddTagToDatabase(e.choice.text); 
      } else { 
       var isValidTag = true; 
       $(config.element[0] + ' ul li').find('div').each(function (index, item) { 
        if ($(item).html().toLowerCase().trim() == e.choice.text.toLowerCase().trim()) { 
         isValidTag = false; 
         e.choice.text = ''; 
         return; 
        } 
       }); 
      } 
     }) 
1

Select2 4.0.0支持重複標籤。

Jsfiddle Demo link

$eventSelect.on("select2:select", function (e) { 
    log("select2:select", e); 
    $eventSelect.append('<option value="'+e.params.data.text+'">' +e.params.data.text + '</option>'); 
}); 

$eventSelect.on("select2:unselect", function (e) { 
    log("select2:unselect", e); 
    e.params.data.element.remove(); 
}); 

function formatResultData (data) { 
    if (!data.id) return data.text; 
    if (data.element.selected) return 
    return data.text; 
}; 

此基礎上選擇2事件和github issues

圖片: enter image description here

+0

與您的示例有重新排序問題。選擇「紅色,紅色,綠色」,獲得「紅色,綠色,紅色」 – 2018-02-16 08:56:46