how to tell elm about external DOM changes

I'm using elm 0.17.1 and trying to interop with select2 javascript library(version 4.0.3), here is my 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}

and the javascript side :

$(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);
           });
        })
     })

Right now when I select a country an Uncaught type error in my chromium's console appears saying that domNode.replaceData is not a function(it is actually undefined).

The problem is that select2 adds a span to the DOM and Elm doesn't know about it, inspecting domNode reveals that Elm tries to update the span when it should update the text.

I suppose I need effects but I don't know how to use them in my particular usecase.

How to solve my problem ?

for the record I'm using jquery 3 , I compile my elm program into main.js and I load the js files in this order : jquery.min.js, select2.min.js,main.js then the above js code .

I couldn't debug this with elm-reactor because it seems to only work with elm code not js code.

To address this question I've made this example to demonstrate all the core ideas of integrating any third-party JavaScript technology in to your Elm app.

Here are the rules:

Let Elm to own the state
Do not mutate the DOM, produced by Elm's view
You don't need $(document).ready(), if Elm app controls the initialization logic
Use ports to initialize and control the third-party code

Points of interest in the example:

index.js — port subscription setup in JavaScript and select2 bootstrap code
App.elm — owns the configuration for select2 and subscribes to changes

The view provides a container for all the jQuery magic:

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

Any feedback is very welcome, I'm willing to improve this answer if you could tell me, what is missing.