Open Function onclick in Select option

Asked

Viewed 4,878 times

1

I need to open the following onclick in the "Select option"..

How to open an onclick in the select option like this:

I want to do it here:

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

Work like this:

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

NOTE: I cannot use ID or CLASS because I will use the function "CLONE" jquery so if it is duplicated in the function clone the ID and the Class does not work.

javascript
  • 2

    Can you explain your question better? You want an event to be triggered when the user clicks on some option of a select?

  • 1

    If you want to execute a function when selecting a select option, use the onchange in select, when there is change in select it triggers the function.

  • @Giovane, exactly, open a function of select by clicking on option, already tested with onchange and did not give....

  • 1

    @Eduardobreno already tested onchange and did not give..

  • @What kind of function? The Eduardo Breno This right, you must use onchange when in a select. Show here which function you want to perform, explain better everything we can see how to make it work with the onchange.

  • @Giovane, I want to open Onclick to do the same function as the onclick links here: https://jsfiddle.net/pfmfoe30/14/

  • @What the function should do?

  • @Giovane, in js fiddle you can check, by clicking on "span1" note that opens a specific div, and on div "span2" and "span3" as well..

Show 3 more comments

3 answers

1

A response based on your example:

$('#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>

Instead of passing the value per parameter in your onClick you leave the span index value in value of option, so in the onChange of select you can redeem the desired value.

  • 1

    If you don’t want to depend on positioning, you could still define ids for span, and use them as value of options. + 1 because it is based on the example of the questioner.

  • @Giovane, it worked by clicking "run" but creating an html file with the code didn’t work, strange. Even so I cannot use ID as I will use the function "clone" jquery and conflict with ID’s!

  • How is your HTML? Importing jquery lib?

0

@Alh, follows an example without using jquery with javascript for better understanding.

I suggest using jquery as the answer to @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>

0

You can get the required result using select’s onchange event.

If the parameter required for your function is the select value, you can access it using this.value in the body of the function (as long as it has been executed within the scope of select).

If you want to set different parameters for each option, but not related to option value, you can use the attributes prefixed with data- as in the example:

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

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.