Javascript 选择选项：jQuery、Case和show/hide表单字段不'；行不通

我不知道为什么这行不通。我做了同样的事情，我想在选择选项时显示以下div之一。当我选择某个选项时，所有div都会消失，但不会显示任何内容

这是我的密码：

<label class="label">
    <span>Typ:</span>
    <select id="type" class="form-control">
        <option value="1" selected="selected">Fotoroleta</option>
        <option value="2">Fototapeta</option>
        <option value="3">Obraz</option>
        <option value="4">Plakat</option>
    </select>
</label>


<div id="select_fotoroleta" class="field" >
 // some code
</div>

<div id="select_fototapeta" class="field" >
 // some code
</div>

<div id="select_obraz" class="field" >
 // some code
</div>

<div id="select_plakat" class="field" >
 // some code
</div>

    <script type="text/javascript">
        $('#type').change(function(){
            var selection = $('#type').val();
            $('.field').hide();
            switch(selection){
                case 0:
                    $('#select_fotoroleta').show();
                    break;
                case 1:
                    $('#select_fototapeta').show();
                    break;
                case 2:
                    $('#select_obraz').show();
                    break;
                case 3:
                    $('#select_plakat').show();
                    break;
            }
        });
    </script>

类型：
福托罗莱塔
福托塔佩塔
奥布拉兹
普拉卡特
//一些代码
//一些代码
//一些代码
//一些代码
$（'#type'）。更改（函数（）{
变量选择=$（'#type'）.val（）；
$（'.field'）.hide（）；
开关（选择）{
案例0：
$（'#选择_fotoroleta'）.show（）；
打破
案例1：
$（'#选择_fototapeta'）.show（）；
打破
案例2：
$（“#选择_obraz”）.show（）；
打破
案例3：
$（“#选择_plakat”）.show（）；
打破
}
});

您需要更改case语句，如下所示

case "0":
    break;

---

看起来“selection”的值是作为字符串而不是int传递的。

将您的选择转换为数字。它当前是一个字符串：

var selection = ~~$('#type').val();

~~

是一个简单的快捷方式（而不是较慢的

parseInt

）。如果您知道数字在整数范围内，而不是八进制格式（您的是纯简单的十进制值），就可以了

更好的选择是数据驱动选择：

这样您就根本不需要

开关

，而且很容易维护大量链接

e、 g.您的HTML可以在目标元素中匹配：

<div id="select_fotoroleta" data-id="1" class="field">select_fotoroleta</div>
<div id="select_fototapeta" data-id="2" class="field">select_fototapeta</div>
<div id="select_obraz" data-id="3" class="field">select_obraz</div>
<div id="select_plakat" data-id="4" class="field">select_plakat</div>

JSFiddle:

要选择初始过滤器，请触发初始

更改
事件：

$('#type').change(function () {
    $('.field').hide();
    $('[data-id=' + $(this).val() + ']').show();
}).trigger('change');

JSFiddle:

另一个选项（如果您的数据适合）是使用
ID
s作为
选择中的
值：

    <option value="select_fotoroleta" selected="selected">Fotoroleta</option>
    <option value="select_fototapeta">Fototapeta</option>
    <option value="select_obraz">Obraz</option>
    <option value="select_plakat">Plakat</optio>

JSFiddle:

更新

由于您还希望在更改选择时清除div中的输入，因此更改代码以添加
find（'input'）.val（“”）到
隐藏（）
：

e、 g

jsiddle:
请检查以下代码

<label class="label"> <span>Typ:</span>

    <select id="type" class="form-control">
        <option value="1" selected="selected">Fotoroleta</option>
        <option value="2">Fototapeta</option>
        <option value="3">Obraz</option>
        <option value="4">Plakat</option>
    </select>
</label>
<div id="select_fotoroleta" class="field">// some code</div>
<div id="select_fototapeta" class="field">// some code</div>
<div id="select_obraz" class="field">// some code</div>
<div id="select_plakat" class="field">// some code</div>

<script>

$('#type').change(function () {
    var selection = parseInt($('#type').val());
    $('.field').hide();
    switch (selection) {
        case 1:
            $('#select_fotoroleta').show();
            break;
        case 2:
            $('#select_fototapeta').show();
            break;
        case 3:
            $('#select_obraz').show();
            break;
        case 4:
            $('#select_plakat').show();
            break;
        default:
             $('.field').hide();
            break;

    }

});

</script>

类型：
福托罗莱塔
福托塔佩塔
奥布拉兹
普拉卡特
//一些代码
//一些代码
//一些代码
//一些代码
$（'#type'）。更改（函数（）{
var selection=parseInt（$（'#type'）.val（）；
$（'.field'）.hide（）；
开关（选择）{
案例1：
$（'#选择_fotoroleta'）.show（）；
打破
案例2：
$（'#选择_fototapeta'）.show（）；
打破
案例3：
$（“#选择_obraz”）.show（）；
打破
案例4：
$（“#选择_plakat”）.show（）；
打破
违约：
$（'.field'）.hide（）；
打破
}
});

fiddle:
selection
是一个字符串，而不是一个数字，你在比较苹果和橙子
var selection=parseInt（$（'#type'）.val（），10）
或到数字的快捷转换
var selection=~~$（'#type'）。val（）
（显示的数据没有范围问题或八进制值的危险）它工作正常。但现在我看到了另一个问题。当我开始页面时，每个div都会显示出来。如果我为.field设置display:none，则隐藏所有div。如何在运行页面时仅显示一个选定的div？
触发
初始
更改
事件。我将更新示例。谢谢。这正是我想要实现的。你能告诉我如何清除所有插入的信息吗？我的意思是，如果我在select_fotoroleta中的输入文本中键入一些内容，然后我选择select_obraz，然后我再去select_fotoroleta，我仍然可以看到所有插入的信息。@Axwell:很乐意提供帮助，但您需要在DIVs中显示一个HTML示例。请修改我最后的JSFiddle（），我将向您展示：）
$('#type').change(function () {
    $('.field').hide();
    $('#' + $(this).val()).show();
}).trigger('change');

$('#type').change(function () {
    $('.field').hide().find('input').val('');
    $('#' + $(this).val()).show();
}).trigger('change');

<label class="label"> <span>Typ:</span>

    <select id="type" class="form-control">
        <option value="1" selected="selected">Fotoroleta</option>
        <option value="2">Fototapeta</option>
        <option value="3">Obraz</option>
        <option value="4">Plakat</option>
    </select>
</label>
<div id="select_fotoroleta" class="field">// some code</div>
<div id="select_fototapeta" class="field">// some code</div>
<div id="select_obraz" class="field">// some code</div>
<div id="select_plakat" class="field">// some code</div>

<script>

$('#type').change(function () {
    var selection = parseInt($('#type').val());
    $('.field').hide();
    switch (selection) {
        case 1:
            $('#select_fotoroleta').show();
            break;
        case 2:
            $('#select_fototapeta').show();
            break;
        case 3:
            $('#select_obraz').show();
            break;
        case 4:
            $('#select_plakat').show();
            break;
        default:
             $('.field').hide();
            break;

    }

});

</script>