---
description: >-
  https://www.sanwebe.com/2013/05/select-box-change-dependent-options-dynamically
---

# Select Box Change Dependent Options dynamically (JavaScript Object)

<figure><img src="https://2494213435-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LYjAG13rAPdbArSfRyB%2Fuploads%2FHzvQuUj393VRTP7elYfU%2Fimage.png?alt=media&#x26;token=4fdf25cf-3c43-420e-a973-f97cf70b6f28" alt=""><figcaption></figcaption></figure>

### Example 1

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link rel="stylesheet" href="jquery.sweet-modal.min.css">
  <title>Document</title>
</head>

<body>
  <div class="wrapper">
    <select id="parent_select">
      <option>----</option>
    </select>
    <select id="child_select"></select>
  </div>
  <script language="javascript" type="text/javascript">
  var mList = {
    Chocolates: [
      'Bournville',
      'Snickers',
      'Twix',
      'Ferrero Rocher',
      'Dark Chocolate',
      'Milk chocolate',
      'White chocolate',
      'Gianduja chocolate'
    ],
    Vegetables: [
      'Broccoli',
      'Cabbage',
      'Carrot',
      'Cauliflower'
    ],
    Icecreams: [
      'Black Raspberry',
      'Frozen pudding',
      'Neapolitan',
      'Strawberry',
      'Vanilla',
      'Chokecherry',
      'Frozen yogurt',
      'Booza',
      'Frozen yogurt',
      'Ice milk'
    ],
    Mobiles: [
      'Apple iPhone',
      'Samsung Galaxy',
      'Realme',
      'Huawei',
      'OnePlus',
      'Asus ROG',
      'Xiaomi',
      'Vivo'
    ]
  };
  el_parent = document.getElementById("parent_select");
  el_child = document.getElementById("child_select");
  for (key in mList) {
    el_parent.innerHTML = el_parent.innerHTML + '<option>' + key + '</option>';
  }
  el_parent.addEventListener('change', function populate_child(e) {
    el_child.innerHTML = '';
    itm = e.target.value;
    if (itm in mList) {
      for (i = 0; i < mList[itm].length; i++) {
        el_child.innerHTML = el_child.innerHTML + '<option>' + mList[itm][i] + '</option>';
      }
    }
  });
  </script>
</body>

</html>
```

