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

最新推荐文章于 2024-06-25 15:10:00 发布

哈啰，小米

最新推荐文章于 2024-06-25 15:10:00 发布

阅读量1.7k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/hcx_hcx/article/details/121575484

版权

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);  //
    }

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