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

我试图在选择选项更改的更改上显示div。选择隐藏/显示div - 选项更改不起作用

我已经获取每个选定的选项的数据上的变化，但我想显示该名称div在选择项目的变化。

当我点击选项，将显示该div，当我将改变选择项目，那么它会改变div和以上显示div将不可见。

代码：

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

什么我将不得不在$(".mobile").show();线使用？我试过$(.str).show();但无法正常工作。我想改变选择更改div。

我已经显示警告框，它将显示选中选项的文本。

请任何建议。

来源

2014-01-09 user3145373 ツ

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(); 
})

来源

2014-01-09 07:58:27

改变这个$(".mobile").show();这=>$("."+str).show();

working demo

，因为你有硬编码的JQ到.mobile，它没有改变！:)

所以最终JQ是

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

编辑

的，你可以用

$("div:visible").hide();

demo here

来源

2014-01-09 07:52:54 NoobEditor

是的，先生的权利，但是当我改变上述DIV的项目应做看不见。 –

当我运行页面时，不应该看到div。 –

请看编辑 – NoobEditor

你可以让我喜欢这件T工作 -

$("select").change(function() { 
     $('div').hide(); 
     $('.'+$('option:selected',this).text()).show(); 
}).change();

演示----->http://jsfiddle.net/nCRh6/7/

来源

2014-01-09 07:55:30

当我运行页面时，不应该看到div，该怎么办？ –

http://jsfiddle.net/nCRh6/13/ –

试试这个

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

DEMO

来源

2014-01-09 07:55:32

你可以改变这一点：

$(".mobile").show();

这样：

$("."+str).show().siblings('div').hide();

Fiddle demo

来源

2014-01-09 07:56:36 Jai

当我运行页面时，不应该显示div，该怎么办？ –

您可以在代码末尾省略trailing'.change（）'。 – Jai

只是把：

$("div:visible").hide(); 

$("."+str).show();

来源

2014-01-09 07:58:37 user2211216

你可以这样做：

$('div').hide(); 
$("." + str).show();

小提琴：Demo

来源

2014-01-09 08:00:04

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

回答

相关问题