選擇隱藏/顯示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 - 選項更改不起作用

回答

相關問題