Open onclick function in Select option

Question

Open onclick function in Select option

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

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

I want to do this 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>

I can not use ID or CLASS because I will use the "CLONING" function of jquery so if it is duplicated in the function clone the ID and ClASS does not work.

javascript

asked by anonymous 08.11.2016 / 01:23

3 answers

Empty character exiting in Html Problems with utf8_decode in array return

score 1 · Answer 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><selectid="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 by parameter in your onClick you leave the value of the span index in value of option , so in onChange of select you can redeem the desired value

score 0 · Answer 2

You can have the required result using the select onchange event.

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

If you want to set different parameters for each option, but not value-related options, you can use the data- prefixed attributes 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>

score 0 · Answer 3

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

I suggest using jquery as the response of @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>