原生select 动态渲染option，获取option的value值

最新推荐文章于 2023-05-17 16:47:23 发布

原创最新推荐文章于 2023-05-17 16:47:23 发布 · 1.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍了如何在HTML中使用select标签，并通过JavaScript动态生成option元素，结合后端返回的数据列表进行操作。同时，展示了如何监听select元素的change事件，获取选中项的值和文本，以实现简单的数据交互。对于经常使用框架的开发者，这是一个关于原生JavaScript基本功能的简单回顾。

1.在html里首先写个selcet标签

 <select class="combobox form-control"  name="goodsTypeId" id="goodsTypeId" >
                            
 </select>

2.拿到后端返回的list，然后循环，动态生成option

if(res.code=== 0){
     var optionList = res.data;//接口获取到的list
     var option= '';
     for (var i=0;i<optionList.length;i++){
         option += "<option value=\""  + optionList[i].goodsTypeId + "\">" +             
                    optionList[i].goodsTypeName + "</option>";
          $("#goodsTypeId").html("<option value=''  >请选择</option>"+option);
                        }
 }else{
       cosole.log('报错信息')
  }

3.获取option的值

 var sel = document.getElementById("goodsTypeId"); //拿到select
 sel.onchange = function () {
      var index = this.selectedIndex;
      console.log('商品类型===', this.value);
      console.log('选择===',this.options[index].text);  //
    }

简单吗，简单，但是框架用多了，总会忘记原生的写法，忘记原生的处理方法，浪费时间，唉