Скрыть/показать div на выбор - смена опции не работает

Question

Я пытаюсь отобразить div на смене выбора опции.

У меня есть данные по каждой выбранной опции при изменении, но я хочу отобразить это имя div при изменении элемента select.

Когда я нажимаю на опцию, которая покажет, что 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 на выбранном изменении.

Я отобразил окно предупреждения, в котором будет отображаться текст выбранной опции.

Любое предложение пожалуйста.

Answer 1

Demo

Markup:

<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(); к этому =>$("."+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(); 

EDIT

для этого вы можете использовать

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

demo here

Answer 3

Вы можете сделать я т работы, как это -

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

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

Fiddle: Demo