Ruby on Rails的：簡單的方法時，一定下拉列表中選擇

Question

現在顯示的文本框，

我有以下的jQuery，CSS和HTML代碼的工作我想要的方式。在哪裏如果用戶選擇某個文本框顯示的下拉菜單。但我怎麼能輕鬆地在軌道上做到這一點？

HTML

<form> 
    <select id="sel"> 
     <option value="">- select -</option> 
     <option value="option1">Option 1</option> 
     <option value="option2">Option 2</option> 
     <option value="option3">Option 3</option> 
     <option value="option4">Option 4</option> 
     <option value="other">Other</option> 
    </select> 
    <label id="label1" for="option1">Text box label 1 
     <input type="text" id="option1" /> 
    </label> 
    <label id="label2" for="option2">Text box label 2 
     <input type="text" id="option2" /> 
    </label> 
    <label id="label3" for="option3">Text box label 3 
     <input type="text" id="option3" /> 
    </label> 
    <label id="label4" for="option4">Text box label 4 
     <input type="text" id="option4" /> 
    </label> 
    <label id="label5" for="option5">Other 
     <input type="text" id="option5" /> 
    </label> 
</form> 

CSS

label { 
    display:block; 
} 

JQUERY

$(function() { 
    //This hides all initial textboxes 
    $('label').hide(); 
    $('#sel').change(function() { 
     //This saves some time by caching the jquery value 
     var val = $(this).val(); 
     //this hides any boxes that the previous selection might have left open 
     $('label').hide(); 
     //This just opens the ones we want based off the selection 
     switch (val){ 
      case 'option1': 
       $('#label1').show(); 
       break; 
      case 'option2': 
       $('#label2').show(); 
       break; 
      case 'option3': 
       $('#label1').show(); 
       break;   
     } 
    }); 

}); 

Rails代碼

<%= f.select(:title, ["Select an option","Option 1", "Option 2", "Option 3"])%> 

但我不確定如何顯示文本框。而我選擇的選項只有3個。但在我的應用程序中會有10-15。

感謝

Answer 1

您應該在您的選項和HTML ID之間使用慣例來顯示。

如果你的選擇有一個靜態值，匹配現有的標籤，你可以這樣做：

$(function() { 
    $('label').hide(); 
    $('#sel').change(function() { 
     var val = $(this).val(); 
     $('label').hide(); 
     $('#label'+val).show(): 
    }); 
}); 

有了這個，你就不必處理每一個選項，但只需添加相應的選項/標籤ID。

Answer 2

代替硬編碼的ID，試圖抓住下拉的selectedIndex屬性;索引從0（零）開始

var i = getElementById('sel').selectedIndex ; 
$('#label'+i).show(); 
$('#option'+i).show(); 

這是可擴展的，所以如果你在將來添加選項，將工作。