Get data from json into option when another option selected

Question

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 class="list-dist">
    <li><a id="" class="dist 1" value="dist 1">dist 1</a></li>
    <li><a id="" class="dist 2" value="dist 2">dist 2</a></li>
    <li><a id="" class="dist 3" 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.

@lucumt I have updated my question, I want to get the value for the secondary option `"name"` from the json file — Jayzz, Oct 07 '22 at 03:11

score 1 · Accepted Answer · answered Oct 07 '22 at 03:23

1

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>

answered Oct 07 '22 at 03:23

flyingfox

13,414
3
24
39

Thank you a lot ♥~ I will try it. But how to get data from external json file – Jayzz Oct 07 '22 at 03:29
@Jayzz Check [how-to-read-an-external-local-json-file-in-javascript](https://stackoverflow.com/questions/19706046/how-to-read-an-external-local-json-file-in-javascript) – flyingfox Oct 07 '22 at 03:30
@Iucumt Thank you a lot. I had a hard time getting the data from the external json file, but your code really helped me – Jayzz Oct 07 '22 at 06:19
@Iucumt can I ask you one more related question? – Jayzz Oct 07 '22 at 06:43
@Jayzz of course – flyingfox Oct 07 '22 at 06:48
Thank you. Like the code I described above, after selecting from the list menu `dist 1`, the value `dist 1` will be assigned from the list menu to `option` and other `options` will be hidden. But the `sub option` values of `dist 1` are not showing. They only show up when I don't hide the `options` and reselect each `option`. How can i hide unselected `options` and still show the `sub option` of the selected option – Jayzz Oct 07 '22 at 07:25
@Jayzz Sorry for my poor English,I can not understand your comments fully,do you want to let subItem display when the page loaded?If so,you can trigger a change event – flyingfox Oct 07 '22 at 08:03
please review my code in question. When clicking on `dist 1` in the menu list `
`, `option` will also show `dist 1`. `dist 2, dist 3...` will be hidden. But the `sub option` (`ward 1, ward 2, ward 3...`) is not showing. I want them to be displayed immediately after clicking on the menu list
– Jayzz Oct 07 '22 at 08:20
@Jayzz You can use `$("#distId").on("click"` instead,just bind `on` instead of `change` – flyingfox Oct 07 '22 at 08:23
@Iucumt Thank you, it works. But I have to click on the `option` for the `sub option` to show up, is there any way to automatically display the `sub option` without `click` or `change`? – Jayzz Oct 07 '22 at 08:39
@Jayzz sorry I do not find other ways – flyingfox Oct 07 '22 at 08:50
@Iucumt Unfortunately, but thank you a lot ♥ – Jayzz Oct 07 '22 at 09:01

Get data from json into option when another option selected

1 Answers1