选择选项：jQuery，案例和显示/隐藏表单域不起作用

Question

我不知道为什么这不会工作。我做了一切就像在这个相同的待遇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> 

Answer 1

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

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

~~是handly快捷方式（而不是慢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/

另一种选择（如果您的数据适合它）是使用ID S作为value S IN的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()：

例如

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

因为它看起来像正在通过传递作为字符串的“选择”值不一个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/