Question

我试图通过每个div.wrap的select选项值显示元素。这是一个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。如果用户选择冷，则用户可以使用选择框选择一个选项（热和冷用于演示目的），然后只显示div .cold。

每个选择选项只应影响所在的.wrap div。非常感谢任何帮助。

Answer 1

您想要获取正在更改的select控件的父级，然后找到具有将要显示的匹配类的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

通过一些修改我已经开始工作了

首先，永远不会有多个具有相同ID的元素，这会导致问题

所以我把它们改成了类

我还添加了一点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

修改每个Div彼此分开

2 个答案: