1

Preciso abrir o seguinte onclick no option do "Select"..

Como abrir um onclick no option do select assim:

Quero fazer isso aqui:

<a onClick="Select(0, this);">span1</a>

Funcionar assim:

<select>
    <option onClick="Select(0, this);">1 </option>
    <option onClick="Select(1, this);">2</option>
</select>

OBS.: Não posso usar ID nem CLASS pois utilizarei a função "CLONAR" do jquery então caso for dupliacado na função clonar o ID e a ClASS não funciona.

8
  • 2
    Pode explicar melhor sua dúvida? Você quer que um evento seja disparado quando o usuário clicar em alguma opção de um select?
    – Giovane
    Commented 8/11/2016 às 0:25
  • 1
    Se tu quiser executar uma função ao selecionar uma opção do select, use o onchange no select, quando houver mudança no select ele dispara a função. Commented 8/11/2016 às 0:31
  • @Giovane, exatamente, abrir uma função do select ao clicar no option, já testei com onchange e não deu....
    – Alh
    Commented 8/11/2016 às 1:03
  • 1
    @EduardoBreno já testei onchange e não deu..
    – Alh
    Commented 8/11/2016 às 1:03
  • @Alh que tipo de função? O Eduardo Breno esta certo, você deve usar onchange quando num select. Mostra ai qual função vc quer executar, explique melhor tudo que podemos ver como fazer funcionar com o onchange.
    – Giovane
    Commented 8/11/2016 às 1:04

3 Respostas 3

1

Uma resposta baseada no seu exemplo:

$('#selectSpan').on('change', function() {
	Select(this.value, this);
})

function Select(index, el) {
    var spans = el.parentElement.querySelectorAll('span');
    for (var i = 0, l = spans.length; i < l; i++) {
        spans[i].style.display = i == index ? 'block' : 'none';
    }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="selectSpan">
  <option value="-1" selected>Nenhum</option>
  <option value="0">span1</option>
  <option value="1">span2</option>
  <option value="2">span3</option>
</select>

<span style="background:red; display: none;">span1</span>
<span style="background:green; display: none;">span2</span>
<span style="background:blue; display: none;">span3</span>

Em vez de passar o valor por parâmetro no seu onClick você deixa o valor do index do span no value do option, assim no onChange do select você consegue resgatar o valor desejado.

3
  • 1
    Se não quiser depender de posicionamento, poderia ainda definir ids para os span, e usa-los como value do options. +1 por se basear no exemplo do autor da pergunta.
    – Enhardened
    Commented 8/11/2016 às 2:06
  • @Giovane, funcionou ao clicar em "executar" mas ao criar um arquivo html com o código não funcionou, estranho. Mesmo assim não posso utilizar ID pois irei usar a função "clonar" do jquery e da conflito com ID's!
    – Alh
    Commented 8/11/2016 às 3:29
  • Como está o seu HTML? Está importando a lib jquery?
    – Giovane
    Commented 8/11/2016 às 8:03
0

Você pode ter o resultado necessário utilizando o evento onchange do select.

Caso o parâmetro necessário para o sua função seja o valor select, você pode acessa-lo utilizando this.value no corpo da função (contanto que ela tenha sido executada dentro do escopo do select).

Caso você queira definir diferentes parâmetros para cada option, porém não relacionados com value do option, você pode utilizar os atributos prefixados com data- como no exemplo:

<select id="select">
    <option data-param="parametro-1">1</option>
    <option data-param="parametro-2">2</option>
</select>
<p id="value"></p>
<p id="param"></p>

<script type="text/javascript">
(function () {
    document.getElementById('select').addEventListener('change', function() {
        var selectedOption = this.children[this.selectedIndex];

        var value = this.value;
        var param = selectedOption.getAttribute("data-param");

        document.getElementById('value').textContent = 'value = ' + value;
        document.getElementById('param').textContent = 'data-param = ' + param;
    })
})();
</script>

0

@Alh, segue um exemplo sem usar jquery com javascript para melhor entendimento.

Sugiro a utilização de jquery como a resposta do @Giovane

function nomeDaFuncao(elem){
  var indiceDoSelectEscolhido = elem.selectedIndex;
  var valorDoElementoEscolhido = elem.options[indiceDoSelectEscolhido];

  alert("Indice: "+indiceDoSelectEscolhido
    +"\n"+"Valor: "+valorDoElementoEscolhido.value
    +"\n"+"Texto dentro do Select: "+valorDoElementoEscolhido.innerHTML );

}
<select id="selectSpan" onchange='nomeDaFuncao(this)'>
  <option value="-1" selected>Nenhum</option>
  <option value="0">span1</option>
  <option value="1">span2</option>
  <option value="2">span3</option>
</select>

<span id='s1' style="background:red; display: none;">span1</span>
<span id='s2' style="background:green; display: none;">span2</span>
<span id='s3' style="background:blue; display: none;">span3</span>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .