根據所選第N個列表選項顯示第N個跨度

Question

我有一個表格，每行都有一個選擇列表。與選擇列表相鄰的是跨度，需要顯示與所選選項相對應的值，以便爲所選選項提供一些解釋。

例如：

In each row 
    if user selects the 1st option 
     Show the 1st span 

此邏輯應適用於整個表。我有一個JS fiddle here，但我無法獲得每個選項的索引值。

Answer 1

你不需要兩個單獨的事件。您只需使用單一事件的選擇，做穿越目標，並顯示所需的元素：

$("select").change(function(){ 
    $(this).parent().next().find('span').hide();   
    $(this).parent().next().find('span').eq($(this).find('option:selected').index()).show(); 
}).change(); 

Working Demo

Answer 2

您可以通過option:selected

獲得所選擇的選項的索引檢查DEMO

$(document).on('change', 'select', function() { 
    var that = $(this); 
    var val = that.val(); 
    var i = that.find('option:selected').index(); 
    that.closest('tr').find('td').eq(1).find('span').hide().eq(i).show(); 
}); 

Answer 3

像這樣嘗試，

$(document).ready(function() { 
    $(document).on('change','select', function(){ 
     var this1=$(this); 
     var i=this1.find('option:selected').index(); 
     $(this).closest("td").next().find("span").hide(); $(this).closest("td").next().find("span:eq("+i+")").show(); 
    }); 
}); 

DEMO