click country state comes

by Pranab Dey

HTML

Choose Country:
<select name="country" id="country">
        <option value="" disabled selected>Country</option>
    </select>

<div class="state"></div>
<p class="msg"></p>

JavaScript

var list = [{
    "India": ["West Bengal", "Karnataka"]
  },
  {
    "Brazil": ["Sao paolo", "Rio De Jenerio"]
  }
]

var sel = document.querySelector("#country"),
  state = document.querySelector(".state");

list.map(el => {
  var opt = document.createElement("option");
  opt.innerHTML = Object.keys(el).toString();
  opt.value = opt.innerHTML;
  sel.appendChild(opt);
});

sel.addEventListener("change", () => {
  var val = sel.value;
  var sell = document.createElement("select");
  sell.setAttribute("class", "states");
  list.map(el => {
    if (val === Object.keys(el).toString()) {
      state.innerHTML = '';
      Object.values(el).map(el => {
        el.map(el => {
          var opt = document.createElement("option");
          opt.innerHTML = el;
          opt.value = opt.innerHTML;
          sell.appendChild(opt);
          sell.addEventListener("change", () => {
            document.querySelector(".msg").innerHTML = `
        You Select Country ${sel.value}<br>
        and<br>
        State ${sell.value}`;
          });
        })
      })
    } else {
      console.log("GOD");
    }
  })
  state.appendChild(sell);
});