通过js获取<select>标签,初始化为“ “

在动态生成的HTML页面中,由于id不可预知,使用document.getElementById无法获取select元素的value。文章提供了一种解决方案,通过getElementsByTagName获取所有select元素,并遍历设置它们的value为空字符串,以实现初始化为默认值的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在页面标签为动态生成的情况下,id也是动态生成,使用document.getElementById是无法准确的获取select的value,并进行修改。

例:页面有两个下拉列表(假设为动态生成,不可以通过id来进行获取),获取所有下拉列表的第一个value,并且设置为“ ”。

 

下拉框默认显示的是第一个数值,我们要将其初始化默认为""。

 var yxy1 = document.getElementsByTagName("select");
			 console.log(yxy1.length)
			 for(var i=0;i<yxy1.length;i++){
				 yxy1[i].value="";
			 }

 

<template>   <div class="card">   <div class="card-header">    学习计划表   </div>   <div class="card-body">     <div class="row">           </div>     <div class="col-auto">   <div class="input-group">     <span class="input-group-text">学习科目</span>     <input v-model.trim="subject" type="text" class="form-control" placeholder="请输入学习科目">     </div>   </div>     <div class="col-auto">       <div class="input-group">         <span class="input-group-text">学习内容</span>         <textarea v-model.trim="content" style="height:32px;" class="form-control" placeholder="请输入学习内容"></textarea>       </div>     </div>   </div>   <div class="col-auto">     <div class="input-group">       <span class="input-group-text">学习地点</span>       <select class="form-select" v-model="selectedOption">         <option v-for="option in options" :value="option.place" :key="option.placeCode">           {{ option.place }}         </option>       </select>     </div>   </div> </div> <form @submit.prevent="add" class="row">   <div class="col-auto">     <div class="input-group">       <span class="input-group-text">学习科目</span>       <input type="text" class="form-control" placeholder="请输入学习科目">    </div>    </div>    <div class="col-auto">      <div class="input-group">     <span class="input-group-text">学习内容</span>    <textarea style="height:32px" placeholder="请输入学习内容" class="form-control"></textarea>   </div>   </div>   <div class="col-auto">     <div class="input-group">   <span class="input-group-text">学习地点</span>   <select class="form-select">     <option value="1">自习室</option>     <option value="2">图书馆</option>     <option value="3">宿舍</option>   </select> </div>   </div>   <div class="col-auto">     <button class="btn btn-primary" type="submit">添加</button>   </div> </form> <table class="table table-hover">   <thead>     <tr>       <th scope="col">序号</th>       <th scope="col">学习科目</th>       <th scope="col">学习内容</th>       <th scope="col">学习地点</th>       <th scope="col">完成状态</th>       <th scope="col">操作</th>     </tr>   </thead>   <tbody>     <tr>     <td>1</td>     <td>Vue.js 前端实战开发</td>     <td>学习指令,例如 v-if, v-for, v-model 等</td>     <td>自习室</td>     <td>       <div class="form-check form-switch">         <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">         <label class="form-check-label" for="flexSwitchCheckDefault">未完成</label>       </div>     </td>     <td>       <a href=" " @click="remove(item.id, item.status)">删除</a >     </td>     </tr>   </tbody> </table> <div class="form-check form-switch">   <input v-model="item.status" :id="'sw'+item.id" class="form-check-input" type="checkbox" role="switch">   <label v-if="item.status" class="form-check-label" :for="'sw'+item.id">已完成</label>   <label v-else class="form-check-label" :for="'sw'+item.id">未完成</label> </div> </template> <script setup> import { ref,reactive } from 'vue'; const remove = (id,status) =>{   if(status){   list.value = list.value.filter(item => item.id !== id)   }else{     alert("请先完成该计划!")   } } const list = reactive([]); const subject = ref(""); const content = ref(""); const nextId = ref(""); const selectedOption = ref('自习室'); const option = reactive([   {placeCode:0, place:'自习室',},   {placeCode:1, place:'图书馆',},   {placeCode:2, place:'宿舍',}, ]); const add = () =>{   if(subject.value === ''){     alert('学习科目为必填项!')     return   }else if(content.value === ''){   alert("学习内容为必填!")   return } nextId.value = Math.max(...list.value.map(item => item.id)) + 1 const obj = {   id: nextId.value,   subject: subject.value,   content:content.value,   place:selectedOption.value,   status:false } list.value.push(obj) subject.value = '' content.value = '' selectedOption.value = '自习室' } </script>修改此代码
03-28
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值