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(); 

这是可扩展的，所以如果你在将来添加选项，将工作。