Get data from json into option when another option selected-CodePudding

I have a list menu like this:

$("ul.list-dist li a").click(function(e) {
  e.preventDefault();
  $("#distId").val($(this).attr("class"));

  var options = $("#distId option");
  var activeClass = $(this).attr("class");

  options.each(function(i, e) {
    var t = $(this);
    if (t.val() == activeClass) {
      t.show();
    } else {
      t.hide();
    }
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="#">city-one</a>
  <ul >
    <li><a id=""  value="dist 1">dist 1</a></li>
    <li><a id=""  value="dist 2">dist 2</a></li>
    <li><a id=""  value="dist 3">dist 3</a></li>
  </ul>
</li>

I can get value from menu list and add selected value to option this:

 <select name="distId" id="distId">
    <option value="dist 1">dist 1</option>
    <option value="dist 2">dist 2</option>
    <option value="dist 3">dist 3</option>
</select>

Now I want after the value from the menu list add the selected value to the option then the data will be taken from the json into this sub option:

<select id="wardId">
</select>

Idea is: when i select dist 1 from list menu, option will show dist 1 and sub option will show wards data (ward 1, ward 2...) contained in dist 1 (from json)

This is my json:

{
"city-one": {
    "dist 1": [
      {"name": "wards 1"},
      {"name": "wards 2"},
      {"name": "wards 3"}
    ],
    "dist 2": [
      {"name": "wards 4"},
      {"name": "wards 5"},
      {"name": "wards 6"}
    ]
},
"city-two": {
    "dist zxc": [
      {"name": "wards z"},
      {"name": "wards x"},
      {"name": "wards c"}
    ],
    "city xyz": [
      {"name": "wards x"},
      {"name": "wards y"},
      {"name": "wards z"}
    ],
    "dist abc": [
      {"name": "wards a"},
      {"name": "wards b"},
      {"name": "wards c"}
    ]
}
}

Sorry if my explanation is confusing. Thanks for your help.

CodePudding user response：

I posted a simple reference for you if I understood your question correctly

const data ={
"city-one": {
    "dist 1": [
      {"name": "wards 1"},
      {"name": "wards 2"},
      {"name": "wards 3"}
    ],
    "dist 2": [
      {"name": "wards 4"},
      {"name": "wards 5"},
      {"name": "wards 6"}
    ],
   "dist 3": [
      {"name": "wards 7"},
      {"name": "wards 8"},
      {"name": "wards 9"}
    ]
},
"city-two": {
    "dist zxc": [
      {"name": "wards z"},
      {"name": "wards x"},
      {"name": "wards c"}
    ],
    "city xyz": [
      {"name": "wards x"},
      {"name": "wards y"},
      {"name": "wards z"}
    ],
    "dist abc": [
      {"name": "wards a"},
      {"name": "wards b"},
      {"name": "wards c"}
    ]
}
}

$("#distId").on("change",function(){
  let val = $(this).val()
  let keys = Object.keys(data)
  let options = null
  for(k of keys){
     options = data[k][val]
     if(!!options){
       break;
     }
   }
   $("#wardId option").remove();
   options.forEach(o =>{
     $("#wardId").append("<option value="  o.name  ">" o.name "</option>")
   })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Select one:<select name="distId" id="distId">
    <option value="dist 1">dist 1</option>
    <option value="dist 2">dist 2</option>
    <option value="dist 3">dist 3</option>
</select>
<br/>
Select two:<select id="wardId">
</select>