如何仅在选择第一个下拉列表后启用第二个下拉列表？答案

【问题标题】：How to enable second dropdown list only after the first dropdown is selected?如何仅在选择第一个下拉列表后启用第二个下拉列表？
【发布时间】：2019-11-24 03:39:00
【问题描述】：

我已经使用 v-for 动态创建了三个下拉列表。现在，我无法执行以下任务。例如，

1) 我希望 first 下拉列表启用，以便用户可以选择一个选项。

2) 第二个和第三个下拉列表无法选择，必须禁用。

3) 用户从第一个下拉列表中选择一个选项后，第二个下拉列表将启用，但第三个下拉菜单将保持禁用

4) 用户从第二个下拉菜单中选择一个选项后，第三个下拉菜单将启用供用户选择一个选项来自它

Edit1仍在尝试解决此问题，非常感谢您的帮助！

Edit2仍在尝试解决这个问题，有没有人可以帮助我？

Edit3这是一个可与https://codepen.io/Issaki/pen/RzzxvL一起使用的Codepen@

以下是我当前的代码：

    <template>
  <div>
    <!-- Dynamically create the select dropdowns using v-for -->
    <div v-for="(attribute, index) in attributes" :key="index">
      <label>{{attribute.type}}</label>

      <!-- Dynamically render the id to keep track of which dropdown was selected -->
      <select
        @change="selectedValue($event)"
        :id="'option' + index"
        v-model="selectedValues[index]"
      >
        <option value>Select option</option>
        <option v-for="(value, index) in attribute.values" :key="index">{{value}}</option>
      </select>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Do note that, the size of this array is not fixed.
      // At the moment, there is only three objects in the array
      attributes: [
        {
          type: "Color",
          values: ["Black", "White", "Yellow"]
        },
        {
          type: "Size",
          values: ["Small", "Medium", "Large"]
        },
        {
          type: "Finish",
          values: ["Shiny", "Glossy"]
        }
      ],

      selectedValues: []
    };
  },

  methods: {
    selectedValue(e) {
      console.log(e);
      console.log(this.selectedValues);
      if (e.target.id === "option0") {
        if (this.selectedValues[0] === "") {
          document.getElementById("option1").disabled = true;
          document.getElementById("option2").disabled = true;
        } else {
          document.getElementById("option1").disabled = true;
          document.getElementById("option2").disabled = true;
        }
      }
    }
  }
};
</script>

【问题讨论】：

路过，来不及回答。您需要考虑的另一件事是，如果您选择了第一个和第二个下拉菜单并且有人返回并更改了第一个下拉菜单，该怎么办。确保您现在删除第二个下拉列表选择并再次禁用第三个下拉列表！干杯
@haag1 您好，感谢您的回复！有很多东西要跟踪...

标签： javascript html vue.js select drop-down-menu

【解决方案1】：

我认为没有必要求助于元素 ID 或直接操作 DOM。您只需根据已选择的值的数量设置disabled 属性，即可将其全部保存在模板中。

只需将index 传递给@change 处理程序即可确定哪个select 已更改。

new Vue({
  el: "#app",

  data: {
    attributes: [
      {
        type: "Color",
        values: ["Black", "White", "Yellow"]
      },
      {
        type: "Size",
        values: ["Small", "Medium", "Large"]
      },
      {
        type: "Finish",
        values: ["Shiny", "Glossy"]
      }
    ],

    selectedValues: []
  },

  methods: {
    selectValue (index, value) {
      const newValues = this.selectedValues.slice(0, index)

      if (value) {
        newValues.push(value)
      }

      this.selectedValues = newValues
    }
  }
})

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <div v-for="(attribute, index) in attributes" :key="index">
    <label>{{ attribute.type }}</label>
    <select
      @change="selectValue(index, $event.target.value)"
      :value="selectedValues[index]"
      :disabled="selectedValues.length < index"
    >
      <option :value="undefined">Select option</option>
      <option v-for="(value, index) in attribute.values" :key="index">{{ value }}</option>
    </select>
  </div>
  <div>{{ selectedValues }}</div>
</div>

【讨论】：