jquery - 选择时隐藏/显示div-选项更改不起作用

我正在尝试在选择选项更改的更改上显示div。

我有更改时每个选定选项的数据，但我想在更改选定项时显示该名称div。

当我单击将显示该div的选项时，当我更改选择项时，它将更改div，并且在上面显示div将不可见。

jsfiddle demo

代码：

$( "select" )
      .change(function () {
        var str = "";
        $( "select option:selected" ).each(function() {
          str += $( this ).text() + " ";
        });
          alert(str);
        $( ".mobile" ).show();
      })
      .change();

我将在$( ".mobile" ).show();行上使用什么？
我尝试了$( .str ).show();，但是没有用。
我想在选择更改时更改div。

我已经显示了警报框，其中将显示所选选项的文本。

请提出任何建议。

最佳答案

Demo

标记：

<select name="sweets">
    <option value="1">laptop</option>
    <option value="2">mobile</option>
    <option value="3">shoes</option>
    <option value="4">watch</option>
    <option value="5">tablet</option>
    <option value="6">shirt</option>
</select>
<br>
<div class="device laptop" style="position: absolute;z-index: 1;">laptop</div>
<div class="device mobile" style="position: absolute;z-index: 1;">mobile</div>
<div class="device shoes" style="position: absolute;z-index: 1;">shoes</div>

脚本：

$("select")
    .change(function () {
    var str = $("select option:selected").text();
    $(".device").hide();
    $("." + str).show();
})