jQuery Dropdown Show/Hide div

Question

Я действительно мало знаю о javascript, но я пытаюсь использовать следующий код, который хорошо работает. Проблема, с которой я столкнулась, заключается в том, что если я добавлю «...» или «:» в конце опции «Выбрать», код больше не работает.

http://jsfiddle.net/fj63g/58/

HTML:

<select id="dropDown"> 
    <option>Choose</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

Сценарий:

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
$(this).find("option").each(function() 
{ 
$('#' + this.value).hide(); 
}); 
    $('#' + this.value).show(); 

}); 

Любая помощь очень ценится! Благодаря!

Answer 1

Попробуйте вместо этого:

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function() { 
    $('.drop-down-show-hide').hide()  
    $('#' + this.value).show(); 

}); 

Updated fiddle

ИЛИ

Чтобы исправить код, просто добавьте value="" к Choose опции

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 
<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

Вот updated fiddle fixing your code

Answer 2

HTML:

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

Сценарий:

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
$(this).find("option").each(function() 
{ 
    if (this.value != '') 
    { 
     $('#' + this.value).hide(); 
    } 
}); 
$('#' + this.value).show(); 

}); 

Ответ Написал karth лучше, но это, так что вы можете увидеть, что это был провал.

В конечном счете, потому что вы говорили ему скрывать предмет, которого не было, он ломал эту линию и не показывал ваши div.

Код JavaScript пытается решить:

$('#' + undefined).hide(); 

Он не мог, таким образом, будет сгенерировано сообщение об ошибке, а не отображать дивы.

Ответ Karth является наиболее эффективным, но вы также можете преодолеть его, как показано выше, указав значение опции «Выбрать», а затем проверив его при показе/скрытии.

Answer 3

Используйте его http://jsfiddle.net/fj63g/59/

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function() { 
    $('.drop-down-show-hide').hide(); 
    $('#' + this.value).show(); 
}); 

Answer 4

Я бы предложил попробовать это из этой скрипки fiddle

HTML:

<select id="dropDown"> 
    <option value="">Choose...</option> 
    <option value="div1">Show Div 1</option> 
    <option value="div2">Show Div 2</option> 
</select> 

<div id="div1" class="drop-down-show-hide">div 1</div> 
<div id="div2" class="drop-down-show-hide">div 2</div> 

ЯШИ:

$('.drop-down-show-hide').hide(); 

$('#dropDown').change(function(){ 
    $(this).find("option").each(function(){ 
     $("#" + $(this).val()).hide(); 
     console.log($(this)); 
    });  
    $("#" + $(this).val()).show(); 
}); 

он сохраняет синтаксис стиля jquery.

Answer 5

<script type="text/javascript" src="js/jquery-1.10.2.js"></script> 

<script> 
function namedata(data) 
{ 
    if(data=='A') 
    { 
     $('#diva').css('display','block'); 
     $('#divb').css('display','none'); 
    } 
    else if(data=='B') 
    { 
     $('#divb').css('display','block'); 
     $('#diva').css('display','none'); 
    } 
} 
</script> 



<p><label>Choose Name</label> 
     <select name="name" onchange="return namedata(this.value);"> 
      <option>-Select-</option> 
      <option value="A">A</option> 
      <option value="B">B</option> 
     </select> 
     </p> 

    <div style="display:none;" id="diva">My Div A</div> 
    <div style="display:none;" id="divb">My Div B</div>