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的右侧，它有一个关闭按钮，可以关闭我们在学位选项中选择的结果。和select2一样。你们可以教我如何将其移到课堂内部吗？

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

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

以下是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 3

我真的不明白你问题的最后一部分（＆＃34;用x按钮先生＆＃34;），但这里是一个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"));
  });
});

将select2值移动到其他div

3 个答案: