I am working on creating a dropdown menu using a JavaScript array. My goal is to display a specific span element when certain options are selected.
For instance, I want the span to be shown only when options "a" and "c" are selected, but not when option "b" is chosen.
var city = ["a","b","c"];
// Populate city dropdown
var select_city = document.getElementById("city");
for(var i = 0; i < city.length; i++) {
let opt = city[i];
let el = document.createElement("option");
el.textContent = opt;
el.value = opt;
select_city.appendChild(el);
};
// Show output
var output = document.getElementById("output");
select_city.onchange = function() {
output.style.display = (this.value == city.value && this.value == !"b") ? "block":"none";
};#output {
display: none;
}<select name="city" id="city">
<option value="-">- Choose city -</option>
</select>
<span id="output"></span>Why isn't this code functioning as intended? What adjustments should I make for it to work properly?