javascript - 获取第二个选择框的值以获取结果

问题描述

我正在尝试在我的项目的嵌套选择中获取城市、县、区域。所以我有 3 级嵌套选择。但是当我尝试使用 2 个变量获取数据时，我无法将“first selected select”的值传递给 fetch url。

如何将首先选择的选择值的值传递给 fetch url？

我需要用值替换this.MUSTBEVALUEOFTHESECNDSELECTEDSELECT

<script src="https://unpkg.com/vue"></script>

<script type="text/javascript">
  window.addEventListener('load', function() {


    var app = new Vue({
      el: '.app',
      name: "IlIlceUygulaması",
      data: {

        iller: {},
        ilceler: {},
        mahalleler: {},

        selected: 0,
        ilSecildi: false,
        ilceSecildi: false,



      },


      methods: {
        illeriGetir() {
          fetch("https://www.example.com/loc/")
            .then(result => result.json())
            .then(result => {
              this.iller = result;
            })
        },
        ilceleriGetir() {
          this.ilSecildi = true;
          fetch(`https://www.example.com/loc/${this.selected}`)
            .then(result => result.json())
            .then(result => {
              this.ilceler = result;
            })
        },
        mahalleleriGetir() {
          this.ilSecildi = true;
          this.ilceSecildi = true;

          fetch(`https://www.example.com/loc/${this.MUSTBEVALUEOFTHESECONDSELECTEDSELECT}/${this.selected}`)
            .then(result => result.json())
            .then(result => {
              this.mahalleler = result;
            })
        }
      }
    })
    app.illeriGetir();
  });

</script>


<div class="app" style="margin-top:50px">
  <b>İl Seçiniz</b>
  <select class="form-control col-md-3" v-model="selected" v-on:change="ilceleriGetir()">

                                    <option v-for="list in iller"
                                            v-bind:value="list.cityid">
                                        {{list.cityname}}
                                    </option>
                                </select>
  <div v-if="ilSecildi" style="margin-top:50px">
    <b> İlçe Seçiniz</b>
    <select class="form-control col-md-3" v-on:change="mahalleleriGetir()">
                                        <option v-for="list in ilceler"
                                                v-bind:value="list.countyid">
                                            {{list.countyname}}
                                        </option>
                                    </select>
  </div>

  <div v-if="ilceSecildi" style="margin-top:50px">
    <b> Mahalle Seçiniz</b>
    <select class="form-control col-md-3">
                                        <option v-for="list in mahalleler"
                                                v-bind:value="list.areaid">
                                            {{list.areaname}}
                                        </option>
                                    </select>
  </div>

</div>

标签： javascriptvue.jsvuejs2fetch-api

创建一个新对象，该对象具有每个选择框的属性以进行变异：

selections: {
    iller: null,
    ilceler: null,
    mahalleler: null
}

更新所有v-model绑定：

v-model="selections.iller"
v-model="selections.ilceler"
v-model="selections.mhalleler"

现在您可以正确获取它们。

javascript - 获取第二个选择框的值以获取结果

问题描述

解决方案

推荐阅读