Question

我希望显示一系列文本框以供其他输入，具体取决于用户从下拉列表中选择的内容。选择option1时，会出现一个文本框以进行其他输入。 Option2需要3个文本框，option3需要2个文本框，option4和其他需要一个文本框。

我已经拼凑了一些来自研究其他线程的代码，并提出了这里的代码：http://jsfiddle.net/zFQf3/

有人可以提供指示吗？

谢谢。

Answer 1

您的标记无效，您在页面上有多个ID。每个dom的id都必须是唯一的。

完成所需操作的最简单方法是将id=更改为class=并根据选项显示/隐藏。

使用该约定，您最终会得到类似的结果：

$(function() {
    $('#sel').change(function() {
        $("input").hide().filter("." + $(this).find("option:selected").val()).show();
    });
    $("input").focus(function() {
        $(this).next("span").fadeIn(1000);
    }).blur(function() {
        $(this).next("span").fadeOut(1000);
    });
});

使用css从一开始就隐藏所有内容

input{
    display:none;
}
span
{
    display:none;
}

jsfiddle上的更新示例。

Answer 2

如果你想要一个基于类的解决方案，我重写你在jsFiddle上的内容（http://jsfiddle.net/zFQf3/29/或http://jsfiddle.net/zFQf3/47/），但我不知道如何使用该网站，所以我不知道是否保存。我将复制并粘贴在这里以防万一。

我将您的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;
}

我将你的JS修改为：

$(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':
            case 'option4':
            case 'other':
                $('#label1').show();
                break;
            case 'option2':
                $('#label1').show();
                $('#label2').show();
                $('#label3').show();
                break;
            case 'option3':
                $('#label1').show();
                $('#label2').show();
                break;        
        }
    });
    //I'm not really sure why these are here
    $("input")
        .focus(function () {
            $(this).next("span").fadeIn(1000);
        })
        .blur(function () {
             $(this).next("span").fadeOut(1000);
        });
});

我认为这就是你想要的。

Answer 3

编辑了您的代码http://jsfiddle.net/zFQf3/44/

用class
删除范围作为标签，而使用'label'代替
修改后的JQuery代码（参见上面的URL）

代码的作用基本上是获取所选内容的值，并显示具有匹配类和标签的内容。因此，对于'option1'的值，它显示任何类别为option1的东西以及任何带有for（label）of option1的东西。

此外，在显示任何内容之前，它会隐藏所有标签和文本框，以便在您逐个浏览下拉菜单时不会显示所有文本框。

根据下拉列表选择显示特定的文本框

3 个答案: