I'm having an issue with my dropdown functionality. When I select "USA", the options should show states such as Washington, Texas, and New York. However, after selecting Texas, only Washington is displayed as the first value instead of Texas in the div element. I want to find a solution without using JQuery. Can anyone help?
function random_function() {
var name = document.getElementById("output").value;
document.getElementById("district").innerHTML = name;
var a = document.getElementById("input").value;
if (a === "INDIA") {
var arr = ["Maharashtra", "Delhi"];
} else if (a === "USA") {
var arr = ["Washington", "Texas", "New York"];
}
var string = "";
for (i = 0; i < arr.length; i++) {
string = string + "<option>" + arr[i] + "</option>";
}
document.getElementById("output").innerHTML = string;
var name = document.getElementById("output").value;
document.getElementById("district").innerHTML = name;
}<select id="input" onchange="random_function()">
<option>select option</option>
<option>INDIA</option>
<option>USA</option>
</select>
<div>
<select id="output">
<option></option>
</select>
</div>
<div>
<p id="district" onchange="random_function()"></p>
</div>