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.