Skip to main content
alteração de código no snippet
Fonte Link
Giovane
  • 2,1mil
  • 11
  • 16

Uma resposta baseada no seu exemplo:

var selectSpan = $('#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.

Uma resposta baseada no seu exemplo:

var selectSpan = $('#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.

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.

Fonte Link
Giovane
  • 2,1mil
  • 11
  • 16

Uma resposta baseada no seu exemplo:

var selectSpan = $('#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.