How to get the value of some select item when clicking on it

Question

How to get the value of some select item when clicking on it

Navigation

#1 by (2 votes)
#2 by (1 votes)

1

In the font given below, the logic fails to capture the click on the select element returning only the first option , and so it appears to be 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 is missing to instruct the code.

I THINK - Go through the items and point to the variable opt which was selected in option .

Because I want to make use of variable that is much more practical and elegant. Like this:

            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 manually:

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

javascript html html5 select option

asked by anonymous 10.05.2018 / 17:47

2 answers

2

Just get the value attribute:

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>

10.05.2018 / 18:03

How to retrieve data from a SUM with where different? How to use the Strings file inside the code

score 1 · Accepted Answer

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

So, 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>