selectedoption怎么回到默认值

html代码如下，通过v-model可以获取到选中的值，如果option中存在value属性，优先获取value值即option.name，如果不存在，则获取option的文本内容。

一.静态的select与option

也就是说不用vue动态渲染

这种情况下就很简单：一般默认是第一个是默认选项，如果想别的默认，加个selected就好

< select id = "sel" >

< option value = "1" >1</ option >

< option value = "2" selected = "selected" >2</ option >

< option value = "3" >3</ option >

</ select >

登录后复制

二.vue动态渲染的option

这里我以使用elementUI搭建的为例：

默认值的话是需要在select标签里定好，用v-model绑定，默认值的话我们可以在渲染的数组外定，只要和option的value保持一致就好了

可以用<s:select>标签这个是struts2的标签。

1、使用html中的select标签比较麻烦一下，因为想要设置默认的那么就需要selected="selected"标签，如果想实现的话可以使用c:if标签判断一下<c:if test="&#36{sessionScope.zhicheng=='副教授'}">selected="selected"</c:if>当然这样的每一个option都判断一下有点麻烦另外可以用<s:select>标签这个是struts2的标签。

2、select是html的一个标签，与页面是否是jsp无关，option默认选中添加一个属性 selected 即可，<option selected="selected">Mercedes</option>在遍历的时候<option value="1" <c:if test="${item.CONTRACT_HAB eq 1}">selected="selected"</c:if>>H</option>

做一个判断即可添加你想要的那一个年份为默认选中。

关于element select框默认值赋值不成功问题，注意两点：

1、v-model里面的数据和遍历出来value值数据类型不一样。（例：item.provinces类型是number，province类型是String。类型不一样导致赋值不成功）

2、遍历数据和赋值的先后顺序，必须保证数据先遍历后赋值。

注意注意注意：要为select设定默认值，只要把v-model绑定的值和你想要选中option的value值设置一样即可。

<el-form-item label="省:">

<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

<el-form-item label="省:">

<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

<el-form-item label="省:">

<el-select @change="getCid(editForm.pid)" v-model="editForm.pid" clearable placeholder="请选择省">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsPid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

</el-form-item>

<el-select @change="getAid(editForm.cid)" v-model="editForm.cid" clearable placeholder="请选择市">

<el-option

:key="0"

label="请选择"

:value="0">

</el-option>

<el-option

v-for="item in optionsCid"

:key="item.regionId"

:label="item.regionName"

:value="item.regionId">

</el-option>

</el-select>

重要的事情说三遍data定义必须与后台一致的数据类型，比如后台返回来的是数字，就必须定义数字类型的

pid:0,//必须制定Number（与后台返回来的数据类型一致）

cid:0,//必须制定Number（与后台返回来的数据类型一致）

aid:0,//必须制定Number（与后台返回来的数据类型一致）

赋值的时候也必须是数字类型的

VillageInfo(id){

if(id){

api.getVillageInfo(id).then(res =>{

if(res.status==200){

this.getCid(res.data.pid)

this.getAid(res.data.cid)

this.pName=res.data.pName

this.cName=res.data.cName

this.aName=res.data.aName

this.pid=res.data.pid

this.editForm={

//省市区

pid:Number(res.data.pid),

cid:Number(res.data.cid),

aid:Number(res.data.aid),

villageId:res.data.villageId,

villageName:res.data.villageName,

villageCoding:res.data.villageCoding,

useArea:res.data.useArea,

netArea:res.data.netArea,

buildingNo:res.data.buildingNo==0?"":res.data.buildingNo,

buildingArea:res.data.buildingArea,

notArea:res.data.notArea,

lockingArea:res.data.lockingArea,

menuId:res.data.menuId,

status:res.data.status,

isBenefit:res.data.isBenefit,

//付款场景

//fromType:this.$refs.formTypeChild.tempValue,

address:res.data.address,

companyId:res.data.companyId,

}

}

})

}

},

---