How to get the value of a select item by clicking on it

Question

In the font shown below, logic fails to capture the click on the element of select returning only the first option, and from the looks of it is an index problem - selectedIndex.

Observe:

        function selecionar(link) {

                <!-- aqui chamamos as duas divs no nosso html: descricao -->

                var element1 = document.getElementById("poster");
                var element2 = document.getElementById("titulo");

                    <!-- ISSO DEVERIA FUNCIONAR CONFORME PRETENDIA - jogar o conteúdo do texto dentro do controle da condição para ser comparado sem repetição. Infelizmente ainda há problema -->
                    
				var el = document.getElementById("lista")
        var opt = el.options[el.selectedIndex].text;

                <!-- A rotina abaixo, faz o trabalho de capturar só a string após a última barra invertida "/" -->

                var urlcomp = link;
                var tamurl = urlcomp.length;
                for (var i = tamurl; i >= 0; i--) {
                    if (urlcomp.substring(i, i - 1) == '/') {
                        var antes = i;
                        var depois = urlcomp.substring(antes, tamurl);
                        break;
                    }
                }

                <!-- Daqui em diante, o controle de fluxo 'if' nos dirá o qual informação deve ser apresentada através do que o usuário escolheu -->

                if (depois == opt) {
                        element1.innerHTML = "<img src='https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny.jpg' width='126' height='90'>";
                        element2.innerHTML = "<p>big buck bunny</p>";
                    } else if (depois == opt) {
                        element1.innerHTML = "<img src='https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2.jpg' width='126' height='90'>";
                        element2.innerHTML = "<p>madagascar 2</p>";
                    } else if (depois == opt) {
                        element1.innerHTML = "<img src='https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory.jpg' width='126' height='90'>";
                        element2.innerHTML = "<p>procurando dory</p>";
                    } else if (depois == opt) {
                        element1.innerHTML = "<img src='https://sites.google.com/site/mplayerplugin/repositorio/meu_malvado_favorito_2.jpg' width='126' height='90'>";
                        element2.innerHTML = "<p>meu malvado favorito 2</p>";
                        }
                    }

    select { color: red; }

<select id="lista" onchange="selecionar(this.options[this.selectedIndex].value)">

    <option value="" selected="selected"></option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/big_buck_bunny">big_buck_bunny</option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/madagascar_2">madagascar_2</option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/procurando_dory">procurando_dory</option>

	<option value="https://sites.google.com/site/mplayerplugin/repositorio/meu_malvado_favorito_2">meu_malvado_favorito_2</option>

</select>
<br><br>
    <p id="poster"></p>
    <p id="titulo"></p>

I see that something else is missing to instruct the code.

I THINK - Scroll through items and point at variable opt which was selected in option.

Because I want to make use of variable which is much more practical and elegant. Kind of like:

            var el = document.getElementById("lista")
            var opt = el.options[el.selectedIndex].text;

                if (depois == opt) {
                        ...
                    } else if (depois == opt) {
                        ...
                    } else if (depois == opt) {
                        ...
                    } else if (depois == opt) {
                        ...
                        }
                    }

And avoid filling in manulamente:

                if (depois == 'big_buck_bunny') {
                        ...
                    } else if (depois == 'madagascar_2') {
                        ...
                    } else if (depois == 'procurando_dory') {
                        ...
                    } else if (depois == 'meu_malvado_favorito_2') {
                        ...
                        }
                    }

Answer 1

Just get the attribute value:

document.getElementById('lst').addEventListener('change', function(){
  console.log('valor selecionado: ' + this.value);
});

<select id="lst">
  <option value="http://www.meusite.com.br" selected="selected">item1</option>
  <option value="https://wwww.seusite.net">item2</option>
  <option value="ftp://www.seuendereco.com">item3</option>
</select>

Answer 2

Instead of repeating code, I suggest you put as value in the options the poster name and as text the movie title, storing in a variable the URL of the images folder, since they are all the same. Imagine having to make one if for each item!

Then the code would look like this (see comments in the code):

function selecionar(i) {

   // pego a option selecionada
   var opt = document.querySelectorAll("#lista option")[i];

   // pego o valor da option
   var valor = opt.value;
   
   // pego o texto da option
   var titulo = opt.textContent;

   // guardo a URL numa variável, já que são todas iguais
   var local = "https://sites.google.com/site/mplayerplugin/repositorio/";

   <!-- aqui chamamos as duas divs no nosso html: descricao -->

   var element1 = document.getElementById("poster");
   var element2 = document.getElementById("titulo");

   <!-- A rotina abaixo, captura só a string após a última barra invertida "/" -->

   element1.innerHTML = "<img src='"+local+valor+".jpg' width='126' height='90'>";
   element2.innerHTML = "<p>"+titulo+"</p>";
}

<select id="lista" onchange="selecionar(this.selectedIndex)">
   <option value="" selected="selected"></option>
   <option value="big_buck_bunny">big buck bunny</option>
   <option value="madagascar_2">madagascar 2</option>
   <option value="procurando_dory">procurando dory</option>
   <option value="meu_malvado_favorito_2">meu malvado favorito 2</option>
</select>
<br><br>
<p id="poster"></p>
<p id="titulo"></p>