Javascript 使用select2，处理后如何访问原始的select/input元素？

我使用JQuery EasyUI和Select2的组合，以便能够将选项从右面板拖到左选择框上

在原始的HTML中，选择框是空的，我只在选择框上添加任何内容

<form id="section1">
<select class="select2" class="drop_target" id="selected_options" name="selected_options"></select>
<div>
<div class="draggable_option" data-id="1234">1234</div>
</div>
</form>
<form id="section2">
<select class="select2" class="drop_target"></select>
<div>
<div class="draggable_option" data-id="1235" id="selected_options" name="selected_options">1235</div>
</div>
</form>

问题出现在这一点上，如果您要动态地将内容添加到select，您必须检查它不存在，如果不存在，则创建一个新选项并添加它

var new_option = {
    id: $drag_source.data('id'), data_id: $drag_source.data('id'),
    text: $drag_source.val(), selected: true};

// Set the value, creating a new option if necessary
if (!$drop_target.find("option[value='" + new_option.id + "']").length) {
    // Append it to the select
    $drop_target.append(new Option(
        new_option.text, new_option.id, true, true)).trigger('change');
}

var data = $drop_target.select2('data');
$drop_target.select2('data', data.concat([new_option]));

清澈如泥？不幸的是，它在这一点上出了问题。虽然$drop\u target中对.select2的所有调用都按预期工作，但这不是最初在HTML中的select，而是select2在隐藏原始select后创建的一个div，其id属性类似于id=s2id\u selected\u options。因此，当我们将新选项附加到它时，它不会被添加到select中，而是被错误地添加到select2的div中

我的HTML伪代码是故意以这种迟钝的方式设置的，因为我的页面就是这样。我有多个表单，这些表单中有多个相同的选择，由WTForms生成。因此，选择select by id$“selected_options”的常规方法无法正常工作

---

在javascript中，我需要做的是直接访问原始的、现在隐藏的select，我不能通过id访问它。

当您可以访问与select2生成的元素相关联的元素时，您可以通过.data“select2”访问它的元信息，或者在本例中

$(this).data('select2');

这里有select2使用的大量元数据，如果您浏览源代码，可以看到这些元数据。对于这个问题，要获取原始的select或input元素，可以使用

var $drop_target = $(this).data('select2').opts.element;

无论您使用的是选择还是输入，这都会为您提供一个链接到它的jQuery元素。如果您使用的是select，并且只对此感兴趣，则可以使用较短的选项

var $drop_target = $(this).data('select2').select;

这可能在文档中的某个地方，但我无法找到它，而且我现在也无法通过搜索找到它，因为搜索文档中的数据并选择2会返回几乎每一页文档的结果，因此我自己回答这个问题，希望能为其他人省去麻烦

var $drop_target = $(this).data('select2').select;