Изменить каждый Div Отделить друг от друга

Question

Я пытаюсь показать элементы по значению опции выбора для каждого div.wrap. Вот jsfiddle https://jsfiddle.net/na9rbdyo/1/

<div class="wrap"> 
<select id="type"> 
    <option default value="0">-- Select One --</option> 
    <option value="1">Hot</option> 
    <option value="2">Cold</option> 
</select> 
<div class="hot"> 
    This is hot! 
</div> 
<div class="cold"> 
    This is cold! 
</div> 
</div> 

В основном будет несколько дивы с той же структурой. Пользователь может использовать поле выбора, чтобы выбрать параметр (горячий и холодный для демонстрационных целей), если пользователи выбрали холод, а затем отобразит только div .cold.

Каждый вариант выбора должен влиять только на .wrap, который находится в. Любая помощь будет принята с благодарностью.

Answer 1

Вы хотите, чтобы родительский контроль выбора, который меняется, а затем найти DIV с классом соответствия, который будет показывать, что-то вроде этого:

$('select').on('change', function() { 
    var selectedTxt = $(this).find(':selected').text().toLowerCase();    
    $(this).parent('.wrap').find('div').css('display','none')  
    $(this).parent('.wrap').find('div.'+selectedTxt).css('display','block'); 

}); 

Answer 2

С некоторыми изменениями я получил это не рабочий

Во-первых, никогда не более чем один элемент с тем же идентификатором это вызовет проблемы

поэтому я изменил их на классы

Я также добавить немного быть CSS

HTML

<div class="wrap"> 
    <select class="type"> 
     <option default value="0">-- Select One --</option> 
     <option value="1">Hot</option> 
     <option value="2">Cold</option> 
    </select> 
    <div class="hot"> 
     This is hot! 
    </div> 
    <div class="cold"> 
     This is cold! 
    </div> 
</div> 

<div class="wrap"> 
    <select class="type"> 
     <option default value="0">-- Select One --</option> 
     <option value="1">Hot</option> 
     <option value="2">Cold</option> 
    </select> 
    <div class="hot"> 
     This is hot! 
    </div> 
    <div class="cold"> 
     This is cold! 
    </div> 
</div> 

CSS

.hot, 
.cold { 
    display: none; 
} 

.display { 
    display:block; 
} 

JQuery

$('.type').change(function(){ 
    var select_val = $(this).val(); 
    var wrap = $(this).parent(); 
    if(select_val == 1){ 
     $('.hot', wrap).addClass('display'); 
     $('.cold', wrap).removeClass('display'); 
    }else if(select_val == 2){ 
     $('.cold', wrap).addClass('display'); 
     $('.hot', wrap).removeClass('display'); 
    } 
}); 

и Working Demo