如何告诉 elm 外部 DOM 的变化

我正在使用 elm 0.17.1 并尝试与 select2 javascript 库（版本 4.0.3）进行互操作，这是我的 Main.elm ：

port module Main exposing (..)

import Html exposing (Html,select,option,div,text,br)
import Html.App as App
import Html.Attributes exposing (id,value,width)
-- MODEL

type alias Model =
  {
     country : String
  }


-- UPDATE

type Msg =
      Select String

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Select str -> (Model str,Cmd.none)


-- VIEW

view : Model -> Html Msg
view model =
  div[]
  [
    select [id "myselect"]
    [
     option [value "US"] [text "United States"],
     option [value "UK"] [text "United Kingdom"]
    ],
    text model.country
  ]

-- SUBSCRIPTIONS

port selection : (String -> msg) -> Sub msg

subscriptions : Model -> Sub Msg
subscriptions _=
  selection Select


port issueselect2 : String -> Cmd msg

-- INIT

init : (Model, Cmd Msg)
init =
  ({country=""},issueselect2 "myselect")

main : Program Never
main = App.program {init=init,view=view,update=update,subscriptions=subscriptions}

和 JavaScript 方面：

$(document).ready(function()
     {
        var app=Elm.Main.fullscreen();
        app.ports.issueselect2.subscribe(function(id)
        {
           $('#'+id).select2().on('change',function(e)
           {
              app.ports.selection.send(e.target.value);
           });
        })
     })

现在，当我选择一个国家/地区时，我的 chromium 控制台中会出现未捕获的类型错误，说明domNode.replaceData不是一个函数（它实际上是未定义的）。

问题是 select2 向 DOM 添加了一个跨度，而 Elm 不知道这一点，检查domNode揭示 Elm 尝试更新span何时应该更新文本。

我想我需要效果，但我不知道如何在我的特定用例中使用它们。

如何解决我的问题？

根据记录，我使用的是 jquery 3，我将 elm 程序编译到 main.js 中，并按以下顺序加载 js 文件：jquery.min.js、select2.min.js、main.js，然后是上面的 js 代码。

我无法使用 elm-reactor 进行调试，因为它似乎只适用于 elm 代码，而不适用于 js 代码。

为了解决这个问题我提出了这个例子演示将任何第三方 JavaScript 技术集成到您的 Elm 应用程序中的所有核心思想。

规则如下：

• 让 Elm 拥有国家
• 不要改变 Elm 生成的 DOM 看法
• 你不需要$(document).ready()，如果 Elm 应用程序控制 初始化逻辑
• 使用端口来初始化和控制第三方代码

示例中的有趣点：

• index.js— JavaScript 和 select2 引导代码中的端口订阅设置

• App.elm— 拥有 select2 的配置并订阅更改

该视图为所有 jQuery 魔法提供了一个容器：

view : Model -> Html Msg
view model =
    div []
        [ text (toString model)
        , div [ id "select2-container" ] [] -- The container, where select2 will live
        ]

非常欢迎任何反馈，如果您能告诉我缺少什么，我愿意改进这个答案。