Tienes que mover el javascript al final de la pagina para poder lograrlo:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->



    <input type="text" id="mytext">

    <select id="dropdown" >

      <option value="">None</option>
      <option value="text1">text1</option>
      <option value="text2">text2</option>
      <option value="text3">text3</option>
      <option value="text4">text4</option>
    </select>

    <script text=javascript>
    var select = document.getElementById('dropdown');
    select.addEventListener('change', function(event) {
      var select = event.target;
      var indiceSeleccionado = select.selectedIndex;
      var elementoSeleccionado = select.options[indiceSeleccionado];
      var texto = document.getElementById('mytext');

      texto.value = select.value;

    })
    </script>

<!-- end snippet -->

El código de la página se ejecuta a modo de cascada, de arriba hacia abajo según esta se carga. Cuando un código javascript se carga y ejecuta antes que el elemento al que hace referencia este no puede encontrarse, entonces, tu código `var select = document.getElementById('dropdown');` se ejecuta antes de que el *select* se haya renderizado y por eso no lo puede encontrar.