Question

我试图在更改选择选项更改时显示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。

我已显示警告框，显示所选选项的文字。

请提出任何建议。

Answer 1

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

Answer 2

将此$( ".mobile" ).show();更改为此=＆gt; $("."+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

Answer 3

你可以让它像这样工作 -

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

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

Answer 4

试试这个

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

DEMO

Answer 5

你可以改变这个：

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

到此：

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

Fiddle demo

Answer 6

刚刚提出：

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

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

Answer 7

你可以这样做：

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

小提琴：Demo

选择隐藏/显示div - 选项更改无效

7 个答案: