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

Question

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

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

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

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

4) 用户从第二个下拉列表中选择一个选项后，第三个下拉列表将启用供用户选择一个选项从中

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

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

Edit3 这是一个可以与 https://codepen.io/Issaki/pen/RzzxvL 一起使用的代码笔

下面是我当前的代码:

    <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>

Answer 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>