将 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>

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

Answer 1

由于没有 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 2

我不太明白你问题的最后一部分 ("with the x button sir")，但我相信这是一个 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"));
  });
});

Answer 3

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

这是 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
    }

将 select2 值移动到其他 div

move select2 value to other div

html

css

jquery

jquery-select2