Question

<select v-model="dessert">
  <option>Ice Cream</option>
  <option>Cake</option>
  <option>Pie</option>
</select>

<select v-model="flavor">
  // options should depend on selected dessert
</select>

目标是选择第一个选项，然后出现一个辅助选择框，其中包含基于所选择的第一个选项的选项。

Answer 1

我希望这会有所帮助！

df['new'] = df.apply(lambda x: x.index[x == 1].tolist(), axis=1)

Answer 2

您可以使用v-if / v-else-if来根据option有条件地渲染风味dessert：

<select v-if="dessert" v-model="flavor">
  <option value="null" selected>Choose flavor</option>
  <template v-if="dessert === 'Ice Cream'">
    <option>Vanilla</option>
    <option>Chocolate</option>
    <option>Strawberry</option>
  </template>
  <template v-else-if="dessert === 'Cake'">
    <option>Angel Food</option>
    <option>Pound</option>
    <option>Carrot</option>
  </template>
  <template v-else-if="dessert === 'Pie'">
    <option>Apple</option>
    <option>Cherry</option>
    <option>Peach</option>
  </template>
</select>

new Vue({
  el: '#app',
  data() {
    return {
      dessert: null,
      flavor: null,
    }
  }
})

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

<div id="app">
  <select v-model="dessert">
    <option value="null" selected>Choose dessert</option>
    <option>Ice Cream</option>
    <option>Cake</option>
    <option>Pie</option>
  </select>
  
  <select v-if="dessert" v-model="flavor">
    <option value="null" selected>Choose flavor</option>
    <template v-if="dessert === 'Ice Cream'">
      <option>Vanilla</option>
      <option>Chocolate</option>
      <option>Strawberry</option>
    </template>
    <template v-else-if="dessert === 'Cake'">
      <option>Vanilla</option>
      <option>Chocolate</option>
      <option>Carrot</option>
    </template>
    <template v-else-if="dessert === 'Pie'">
      <option>Apple</option>
      <option>Cherry</option>
      <option>Peach</option>
    </template>
  </select>
</div>

如何基于另一个选择值有条件地加载选择选项

2 个答案: