1

马上，

我有下面的 jquery、css 和 html 代码，它们按我想要的方式工作。Where 如果用户选择一个下拉菜单，则会显示某个文本框。但是我怎样才能在rails中轻松做到这一点？

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;
}

查询

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

});

导轨代码

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

但我不确定如何显示文本框。而我这里的选择选项只有 3 个。但在我的应用程序中，会有 10-15 个。

谢谢

4

2 回答 2

1

您应该在您的选项和要显示的 HTML id 之间使用约定。

如果您的选项具有静态值，与现有标签匹配，您可以执行以下操作：

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

有了这个，您不必处理每个选项，而只需添加相应的选项/标签 ID。

于 2013-05-07T15:45:15.170 回答
0

尝试获取下拉列表的 selectedIndex 属性，而不是对 ID 进行硬编码；索引从 0（零）开始

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

这是可扩展的，因此如果您将来添加选项，它将起作用。

于 2013-05-07T15:44:39.320 回答