vue-cascading-selection-kota-indonesia

cascading selection kota indonesia

by wildanv10

HTML

<html>
  <head>

      <!-- Font Awesome -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
      <!-- Bootstrap core CSS -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
      

      <!-- JQuery -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <!-- Bootstrap tooltips -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
      <!-- Bootstrap core JavaScript -->
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>

      <!-- VUE.js -->
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div class="container">
      <!--separator-->
      <h1 class="text-center">Cascading Selection</h1>
      <!--separator-->
      <hr>
      <div id="cascadingSelect">
        <div class="form-row">
          <div class="form-group col-md-6">
            <label for="selectProv">Provinsi</label>
            <select id="selectProv" v-model="selectProv" class="form-control">
              <option disabled value="">Pilih Provinsi</option>
              <option v-for="option in optionsProv" v-bind:value="option.prov">
                {{ option.prov }}
              </option>
            </select>
          </div>
          <hr>

          <div class="form-group col-md-6">
            <label for="selectKota">Kabupaten/Kota</label>
            <select id="selectKota" v-model="selectKota" class="form-control" disabled>
              <option disabled value="">Pilih Kabupaten/Kota</option>
              <option v-for="option in optionsKota[selectProv]" v-bind:value="option.kota">
                {{ option.kota }}
              </option>
            </select>
         ...

Vue

///////////////////////////// Select

var pilihanProv = [
  {
    "prov": "SUMATERA UTARA"
  },
  {
    "prov": "SUMATERA BARAT"
  },
  {
    "prov": "RIAU"
  },
  {
    "prov": "JAMBI"
  },
  {
    "prov": "LAMPUNG"
  },
  {
    "prov": "ACEH"
  },
  {
    "prov": "BENGKULU"
  },
  {
    "prov": "SUMATERA SELATAN"
  },
  {
    "prov": "KEPULAUAN RIAU"
  },
  {
    "prov": "BANGKA BELITUNG"
  },
  {
    "prov": "BANTEN"
  },
  {
    "prov": "JAWA TIMUR"
  },
  {
    "prov": "DKI JAKARTA"
  },
  {
    "prov": "JAWA BARAT"
  },
  {
    "prov": "JAWA TENGAH"
  },
  {
    "prov": "DI YOGYAKARTA"
  },
  {
    "prov": "PAPUA"
  },
  {
    "prov": "PAPUA BARAT"
  },
  {
    "prov": "NUSA TENGGARA BARAT"
  },
  {
    "prov": "NUSA TENGGARA TIMUR"
  },
  {
    "prov": "MALUKU UTARA"
  },
  {
    "prov": "MALUKU"
  },
  {
    "prov": "BALI"
  },
  {
    "prov": "KALIMANTAN UTARA"
  },
  {
    "prov": "SULAWESI BARAT"
  },
  {
    "prov": "KALIMANTAN BARAT"
  },
  {
    "prov": "KALIMANTAN TENGAH"
  },
  {
    "prov": "KALIMANTAN TIMUR"
  },
  {
    "prov": "KALIMANTAN SELATAN"
  },
  {
    "prov": "SULAWESI UTARA"
  },
  {
    "prov": "GORONTALO"
  },
  {
    "prov": "SULAWESI TENGAH"
  },
  {
    "prov": "SULAWESI SELATAN"
  },
  {
    "prov": "SULAWESI TENGGARA"
  }
];

var pilihanKota = {
  'SUMATERA UTARA': [
    {
      "kota": "TAPANULI TENGAH"
    },
    {
      "kota": "TAPANULI UTARA"
    },
    {
      "kota": "TAPANULI SELATAN"
    },
    {
      "kota": "NIAS"
    },
    {
      "kota": "LANGKAT"
    },
    {
      "kota": "KARO"
    },
    {
      "kota": "DELISERDANG"
    },
    {
      "kota": "SIMALUNGUN"
    },
    {
      "kota": "ASAHAN"
    },
    {
      "kota": "LABUHANBATU"
    },
    {
      "kota": "DAIRI"
    },
    {
      "kota": "TOBASAMOSIR"
    },
    {
      "kota": "MANDAILING NATAL"
    },
    {
      "kota": "NIAS SELATAN"
    },
    {
      "kota": "PAKPAKBHARAT"
    },
    {
      "kota": "HUMBANG HASUNDUTAN"
    },
    {
      "kota":...