從select2多選中刪除選中的選項。

我有以下代碼。目標是將文本框作爲搜索框來設置select2框的樣式。所以我已經實現了它作爲多選，但我只想要選擇一個選項。從select2多選中刪除選中的選項。

一個選項是限制使用maximumSelectionLength: 1。但在這種情況下，將顯示限制消息，我不想發生。（即使我隱藏它，一些空間將被佔用）。

其他選項是隱藏除last-child以外的所有內容，在這種情況下，多個值將在提交表單時發送到後端。

那麼有多種方法可以在多選中選擇新值時刪除當前選定的值嗎？

我使用的是選擇2版本3.5.2

$('#placeSelect').select2({ 
 
    width: '100%', 
 
    allowClear: true, 
 
    multiple: true, 
 
    placeholder: "Click here and start typing to search.", 
 
    data: [ 
 
      { id: 1, text: "Honolulu"  }, 
 
      { id: 2, text: "Tokyo" }, 
 
      { id: 3, text: "Delhi" }, 
 
      { id: 4, text: "Zurich" } 
 
      ]  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> 
 
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> 
 
<h3>Select a value</h3> 
 
<input type="text" id="placeSelect"/>

來源

2016-08-31 Sooraj Chandran

你只能實現一個由多個選擇：假的;你有沒有遇到任何問題？ –

只能保留最後選定的項目，並刪除所有其他。像這樣：

$('#placeSelect').click(function() { 
 
    var t = $("#placeSelect").val().substr($("#placeSelect").val().length - 1); 
 
    $("#placeSelect").val(t).trigger("change"); 
 
}); 
 

 
$('#placeSelect').select2({ 
 
    width: '100%', 
 
    allowClear: true, 
 
    multiple: true, 
 
    placeholder: "Click here and start typing to search.", 
 
    data: [ 
 
      { id: 1, text: "Honolulu"  }, 
 
      { id: 2, text: "Tokyo" }, 
 
      { id: 3, text: "Delhi" }, 
 
      { id: 4, text: "Zurich" } 
 
      ]  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> 
 
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> 
 
<h3>Select a value</h3> 
 
<input type="text" id="placeSelect"/>

來源

2016-08-31 09:49:59 R3tep

$('#placeSelect').select2({ 
 
    width: '100%', 
 
    allowClear: true, 
 
    multiple: false, 
 
    placeholder: "Click here and start typing to search.", 
 
    data: [ 
 
      { id: 1, text: "Honolulu"  }, 
 
      { id: 2, text: "Tokyo" }, 
 
      { id: 3, text: "Delhi" }, 
 
      { id: 4, text: "Zurich" } 
 
      ]  
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdn.jsdelivr.net/select2/3.4.8/select2.js"></script> 
 
<link href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css" rel="stylesheet"/> 
 
<h3>Select a value</h3> 
 
<input type="text" id="placeSelect"/>

來源

2016-08-31 09:21:35 dundun

這是無法完成的，這是最主要的用途。在單選中，搜索框將出現而不是在文本框中搜索，我想直接在文本框中搜索，而不是在select2自定義搜索框中搜索。 –

看到這個線程，也許它可以幫助http://stackoverflow.com/questions/20223044/select2-start-with-input-field-instead-of-dropdown – dundun

您使用的是多選項選擇，我建議你做以下：

multiple: false,

來源

2016-08-31 09:22:17 user181452

它不能完成，這是主要用途。在單個選擇中，搜索框將出現而不是在文本框中搜索。 –

只需添加以下代碼查詢，它會工作，因爲你需要它

$('ul.select2-choices').on("click", function() { 
    $("ul.select2-choices li .select2-search-choice-close").click(); 
    });

來源

2016-08-31 09:47:30

從select2多選中刪除選中的選項。

回答

相關問題