Question

我不知道为什么这不起作用。我在同样的处理中做了所有的事情link我想在选择select中的选项时显示以下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>

Answer 1

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

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

~~是一个简洁的快捷方式（而不是较慢的parseInt）。如果你知道数字在int的范围内而不是八进制格式（你的是纯粹的简单十进制值），那就没关系了。

更好的选择是对选择进行数据驱动：

然后您根本不需要switch，并且很容易维护链接。

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>

然后代码变成了这个：

$('#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/

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

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

e.g。

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

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

Answer 2

您需要更改案例陈述，如下所示

case "0":
    break;

因为它看起来像是选择＆＃39;的价值。正在以字符串而不是int传递。

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

选择选项：jQuery，Case和show / hide表单字段不起作用

3 个答案: