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

Question

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

请检查我的代码:

https://jsfiddle.net/hxe7wr65/

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

这是我现在正在做的设计

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

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', '')
})