选择其他选择下拉菜单的选项答案

【问题标题】：Select the option of other select dropdown选择其他选择下拉菜单的选项
【发布时间】：2020-01-27 07:52:57
【问题描述】：

我有两个选择列表

      <select id="praparat" v-model="selectedProduct">
        <option v-for="(level1,index) in products"
                :key="index"
                :value="level1">{{level1.name}}</option>
      </select>

      <select id="ieprokg" v-model="selectedIeProKg">
        <option selected value="0">wählen</option>
        <option v-for="level1 in ieProKg"
        :value="level1">{{level1}}</option>
      </select>

当我更改第一个下拉列表中的选项时，我希望将第二个下拉值设为默认值。我试过了

$( "#praparat" ).change(function() { 
$("#ieprokg").empty();
}

当我更改第一个下拉列表中的值时，将第二个下拉列表设置为空。但是当我使用$("#ieprokg").append("– Select –"); 时，它不会触发。当我更改第一个下拉列表中的值时，如何将第二个下拉列表设置为选定值 = 0。谢谢。

【问题讨论】：

显示您对html示例格式的要求

标签： javascript jquery vue.js vuejs2

【解决方案1】：

您可以在第一次选择的change 事件中附加一个函数：

<select id="praparat" v-model="selectedProduct" @change="setSecondToDefault">

然后，在 Vue 实例中，将第二个选择的值设置为默认值，如下所示：

methods: {
  setSecondToDefault() {
    this.selectedIeProKg = 0
  }
}

jQuery 和 Vue 不能很好地协同工作，因为 jQuery 直接作用于 DOM 元素，而 Vue 使用虚拟 DOM，它决定何时以及如何将更改反映在实际 DOM 上。

【讨论】：

【解决方案2】：

您可以在 Vue js 中使用观察器来跟踪第一个下拉列表的 v-model 中的任何更改，然后在观察器中触发所需的更改。只需在您的 Vue 实例中添加以下代码即可。

 watch: {
        'selectedProduct': function() {
         this.selectedIeProKg = 0
        }
    }

【讨论】：

是的，这也是一种方法。谢谢:)