将 select2 值移动到其他 div

Question

我正在使用 select2。 我需要将所选 select2 的值移动到另一个 div 像图片 我是这样编码的

    <div class="option">
    <select id="position" style="width: 100%">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
     </select>
    </div>
    <div class="result">
    ....//the result will be here
    </div
<script>
    $("#position").select2({
    allowClear:true,
    placeholder: 'Position'
    });
</script>

通常如果我们选择该选项。它进入带有关闭图标的按钮内，以删除我们选择的内容。我需要将值和关闭图标移至类结果。怎么做？因为和图片一样。 D-3 是我们在度数中选择的值。在d-3的右边，它有一个关闭按钮，可以关闭我们在degree选项中选择的结果。和select2一样。你们能教我如何将其移至课堂结果吗？

Answer 1

在那之后你将如何处理这些文本结果？如果您只关注设计并且您没有尝试附加到另一个 DIV 并且您仍然希望能够使用插件功能来关闭/取消选择结果，那么您必须知道您将无法“轻松”放下它，因为每次您指向选择或关闭按钮时，您都会打开选择。你可以试着放在上面。

这里是Fiddle 的解决方法，它使用向您展示这个想法的 CSS，但您可能需要对其进行处理。

    select {
        width: 300px;
    }
    .to-bottom, .to-top {
        width:320px;
        height:200px;

    }
    .to-bottom .select2  {
        height:150px;

    }
    .to-bottom .select2-container--default .select2-selection--multiple .select2-selection__rendered{
        position:relative;
        top:40px
    }

    .to-top .select2  {
        position:relative;
        top:50px;

    }
    .to-top .select2-container--default .select2-selection--multiple .select2-selection__rendered,
    .to-top .select2-search__field{
        position:relative;
        top:-40px
    }

Answer 2

由于没有 jsfiddle 可供试验，我尝试回答文档中的问题 (https://select2.org/programmatic-control/events#event-data)

$("#position").on("select2:select", function(e) {
    // make sure class 'result' only exists once or use an id
    $(".result").html(e.data.text)
});

我希望这对你有用，否则更多信息（jsfiddle）会真的有帮助:)

Answer 3

我不太明白你问题的最后一部分（“使用 x 按钮先生”），但我相信这是一个 jsfiddle，它可以完成你正在寻找的东西。 JSFiddle example

$(function() {
$('#options').select2({
    "placeholder": "Pick options",
    "multiple": false
  })
  .on("select2:select", function(e) {
    // mostly used event, fired to the original element when the value changes
    $(".result").html($("#options").select2("val"));
  });
});