JavaScript: How to display all divs until one gets selected

This is what I want to achieve: If you chose one option only this single div should be displayed and the other ones are hidden.

For now only the div gets hidden which is selected and the others are shown. I can’t get behind why. This is my code I’m working on so far:

    var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'none';
                } else {
                    dv.style.display = 'block';
                }
            }
        }
        return false;
    }

<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
		<h3>Div1</h3>
		<p>Sweet Lorem Ipsum</p>
	</div>
    <div id="dyndiv2" style="display:block;">
		<h3>Div2</h3>
		<p>Bitter Lorem Ipsum</p>
	</div>
    <div id="dyndiv3" style="display:block;">
		<h3>Div3</h3>
		<p>Salty Lorem Ipsum</p>
	</div>
    <div id="dyndiv4" style="display:block;">
		<h3>Div4</h3>
		<p>Umami Lorem Ipsum</p>
	</div>
</body>

Thank you for having a look at it!

Solution

You have your logic reversed as you want to hide others which are not selected.

 if (t === r) {
    dv.style.display = 'block';
} else {
     dv.style.display = 'none';
}

var DynDiv = new Array(1, 2, 3, 4);

    function showSelected(sapna) {
        var t = 'dyndiv' + sapna,
            r, dv;
        for (var i = 0; i < DynDiv.length; i++) {
            r = 'dyndiv' + DynDiv[i];
            dv = document.getElementById(r);
            if (dv) {
                if (t === r) {
                    dv.style.display = 'block';
                } else {
                    dv.style.display = 'none';
                }
            }
        }
        return false;
    }

<body>
<h1>Choose your flavor</h1>
    <select id="flavor" onchange="showSelected(this.value)">
        <option value="1">Sweet</option>
        <option value="2">Bitter</option>
        <option value="3">Salty</option>
        <option value="4">Umami</option>
    </select>

    <div id="dyndiv1" style="display:block;">
		<h3>Div1</h3>
		<p>Sweet Lorem Ipsum</p>
	</div>
    <div id="dyndiv2" style="display:block;">
		<h3>Div2</h3>
		<p>Bitter Lorem Ipsum</p>
	</div>
    <div id="dyndiv3" style="display:block;">
		<h3>Div3</h3>
		<p>Salty Lorem Ipsum</p>
	</div>
    <div id="dyndiv4" style="display:block;">
		<h3>Div4</h3>
		<p>Umami Lorem Ipsum</p>
	</div>
</body>