javascript - HTML标记在另一个标记内循环

我有一个选择和div元素的列表，像这样：

<select name="select" id="select">
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c">c</option>
    <option value="d">d</option>
</select>
<button>submit</button>

<div id='list'>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
    <div><h2>a</h2>0</div>
    <div><h2>b</h2>1</div>
    <div><h2>c</h2>2</div>
    <div><h2>d</h2>3</div>
</div>

我只想显示具有与所选值匹配的div文本的h2。

我正在尝试以下JavaScript循环：

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#table div');
    var h2Items = document.querySelectorAll('#table div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].display='block';
            } else {
                divItems[i].display='none';
            }
        }

    });

但这是行不通的。
console.log表示h2的文本和所选值都是正确的，
但我不知道如何控制div的样式。
有人可以帮我吗？
谢谢。

最佳答案

您需要指定要更新的样式。

divItems[i].display='block';应该是divItems[i].style.display='block';

和

divItems[i].display='none';应该是divItems[i].style.display='none';

另外，您要定位#table，但是您应该定位#list，因为这是在主div上设置的ID。

完整的JS：

<script>
    var select = document.getElementById('select');
    var divItems = document.querySelectorAll('#list div');
    var h2Items = document.querySelectorAll('#list div h2');
    var button = document.querySelector('button');

    button.addEventListener('click',function(){
        var selectValue = select.value;

        for(i=0; i < divItems.length; i++){
            var h2Text = h2Items[i].innerHTML;
            if (h2Text == selectValue){
                divItems[i].style.display='block';
            } else {
                divItems[i].style.display='none';
            }
        }

    });
</script>