选择选项：jQuery、Case 和显示/隐藏表单字段不起作用答案

【问题标题】：Select options: jQuery, Case and show/hide form fields doesn't work选择选项：jQuery、Case 和显示/隐藏表单字段不起作用
【发布时间】：2015-02-06 10:43:46
【问题描述】：

我不知道为什么这行不通。我做了同样的事情link我想在选择选项时显示以下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>

【问题讨论】：

selection 是一个字符串，而不是一个数字，你在比较苹果和橘子
var selection = parseInt( $('#type').val(), 10)
或快捷方式转换为数字var selection = ~~$('#type').val()（显示的数据不存在范围问题或八进制值的危险）

标签： javascript jquery html

【解决方案1】：

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

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

~~ 是一个方便的快捷方式（而不是较慢的parseInt）。如果您知道数字在 int 范围内而不是八进制格式，那很好（您的数字是纯简单的十进制值）

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

那么您根本不需要switch，它很容易维护大量链接。

例如您的 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>

那么代码就变成了这样：

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

JSFiddle: http://jsfiddle.net/TrueBlueAussie/oa9z14sk/2/

要选择初始过滤器，请触发初始change 事件：

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/oa9z14sk/3/

另一种选择（如果您的数据适合的话）是在select 中使用IDs 作为values：

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

那么额外的data-id就不需要了，代码就更简单了：

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/oa9z14sk/4/

更新

由于您还想在更改选择时清除 div 中的输入，因此更改代码以将 find('input').val(''); 添加到 hide()：

例如

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

JSFiddle： http://jsfiddle.net/TrueBlueAussie/oa9z14sk/6/

【讨论】：

它有效。但现在我看到了其他问题。当我开始页面时，每个 div 都会显示。如果我为 .field 设置 display:none 所有 div 都将被隐藏。运行页面时如何只显示一个选定的div？
Trigger 初始 change 事件。我将更新示例。
谢谢。这正是我想要实现的目标。
你能告诉我如何清除所有插入的信息吗？我的意思是，如果我在 select_fotoroleta 内的输入文本中输入一些内容，然后选择 select_obraz 然后我再次转到 select_fotoroleta，我仍然会看到每个插入的信息。
@Axwell：很乐意提供帮助，但您需要在 在 DIV 内 展示您的 HTML 示例。请修改我上一个 JSFiddle (jsfiddle.net/TrueBlueAussie/oa9z14sk/4)，我会告诉你:)

【解决方案2】：

你需要改变case语句如下

case "0":
    break;

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

【讨论】：

【解决方案3】：

请检查以下代码

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

小提琴：http://jsfiddle.net/oa9z14sk/

【讨论】：