将select2的结果移动到另一个div

Question

我正在使用select2并将其用于单一选择。我想把我们选择的结果移到另一个div。

请检查我的代码：

https://jsfiddle.net/hxe7wr65/

如何移动它？因为我不希望结果显示在框中。我希望盒子仍然清晰，即使在我选择之后，占位符仍然显示出来。

这是我现在正在做的设计

在那张照片中。它唯一可以选择1个选项。在我们选择之后结果显示到另一个地方，因此select仍然有占位符。请大家帮帮我 非常感谢

Answer 1

好的，我不是100％确定这是你正在寻找的，但我认为你不是最后一个选项的抓取值，将它转移到另一个div，然后清除输入。 第一步为其添加一个事件处理程序。

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    console.log('select')
    console.log(e.params.data.id) //This will give you the id of the selected attribute
    console.log(e.params.data.text) //This will give you the text of the selected text
})

现在您拥有该值，将其转移到另一个div相对简单。

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text
    $("#otherdiv").append(text)
})

然后清除表格

var $eventSelect = $("#position"); //select your select2 input

$eventSelect.on('select2:select', function(e) {
    var text = e.params.data.text
    $("#otherdiv").append(text)
    $(this).val('');
    // or depending no what version you are using
    $(this).select2('val', '')
})