select 自匹配问题

 原生js给select赋值或者vue绑定数据，会自匹配下拉选项的value或者key，从而显示对应的label或者对应的option的html

eg：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

原生：

<select name="" id=""> <!-- <option value="1" key='1' label="测试1"></option> <option value="2" key='2' label="测试2"></option> <option value="3" key='3' label="测试3"></option> <option value="4" key='4' label="测试4"></option> <option value="5" key='5' label="测试5"></option> --> <option value="1">测试1</option> <option value="2">测试2</option> <option value="3">测试3</option> <option value="4">测试4</option> <option value="5">测试5</option> </select> <button>修改下拉框显示的值</button> <script> var btn = document.querySelector('button') btn.onclick = function() { document.querySelector('select').value = '3' } </script>     vue绑定数据（此例为element ui）：

<el-select v-model="data.productInspectionDialog.qualityStandard" :placeholder="$t('page.style.index.placehoder.qualityStandard')" >
  <el-option
    v-for="item in options.qualityStandard"
    :key="item.id"
    :label="item.name"
    :value="item.id"
  />
</el-select>
绑定的值初始化或者修改的时候可以赋值与key或者value相同，自动匹配选项

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄