Js 动态生成多个Select 标签， for循环动态给各自select 生成option

最新推荐文章于 2023-11-30 20:21:41 发布

原创最新推荐文章于 2023-11-30 20:21:41 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

啥都不会的萌新

收录于

html

这篇博客介绍了如何使用JavaScript通过for循环动态生成多个Select元素，并为每个Select添加Option。同时，文章还讲解了如何监听Select的点击事件，以获取选中的Option值，这对于动态交互的网页开发十分有用。



var div= "";
for (var i = 0; i < timePeriodList.length; i++) {
    //时段Id
    var timeId = timePeriodList[i].substring(0, 1);

    //时段(17:00-18:00)
    var time = timePeriodList[i].substring(2, timePeriodList[i].length);

    // 生成时段选择下拉框按钮
    div+= "<div class='form-group'>" +
            "<label class='col-xs-3 col-sm-2 control-label item-required'>" + time + ":</label>" +
            "<div class='col-xs-12 col-sm-4'>" +
            "<select onchange='selectSku("+timeId+")' id='" + timeId + "'  class=' form-control'   data-live-search='true' data-size='10' multiple>" +
           "</select>" +
           "</div>" +
            "</div>";

}

//添加时段
$("#timePeriodDiv").append(div);



//生成option
//渲染商品数据  查询当前阈值对应店铺的所有商品
$.ajax({
       type: "GET",
       url: "${base}/admin/secKillActivity/querySku?setId=" + setIdOptVal,
       success: function (data) {
             //动态拼接 option
             var option = "";
             for (var opt = 0; opt < data.data.length; opt++) {
                  option += "<option value='" + data.data[opt].skuId + "'  >" + data.data[opt].productName + "</option>";
              }
              for (var i = 0; i < timePeriodList.length; i++) {
                   //时段Id
                   var timeId = timePeriodList[i].substring(0, 1);
                   //添加商品option
                   $("#" + timeId).append(option);
                   $("#"+timeId).selectpicker({
                        width : 400,
                        actionsBox:true, //在下拉选项添加选中所有和取消选中的按钮
                         multiple:"true",
                    });
                    $("#"+timeId).selectpicker('render');
                    $("#"+timeId).selectpicker('refresh');
              }
       }
});

select 的点击事件获取选中的option

var timeSkuMap = {} ;

//商品选择事件 获取选择的sku数据 及对应的 时段信息
function selectSku(timeId) {
      //获取时段商品所选的id
      var timeSkuIdList = $("#"+timeId+" option:selected");
      //console.info(timeSkuIdList.size());
      var timeSkuIdVal = "";
      for (var valI = 0 ; valI <timeSkuIdList.size() ;valI++){
           if(valI == timeSkuIdList.size()-1){
                timeSkuIdVal += $("#"+timeId).find("option:selected")[valI].value ;
           }else {
                 timeSkuIdVal += $("#"+timeId).find("option:selected")[valI].value+"," ;
           }
      }
    //console.info(timeSkuIdVal);
    timeSkuMap[timeId] = timeSkuIdVal ;
    //console.info(timeSkuMap);
    //转成字符串
    $("#timeSkuMap").val(JSON.stringify(timeSkuMap));
}