2020-10-23

动态在行内添加select下拉框及其内容

思路：
1.首先在行内的td中用.append()方法添加一个select
2.循环动态设置select中option的text()，即下拉框显示内容（前提：显示内容是后台传来的，或者本地写死的）

第一种(在ajax中写)：获取需要显示的内容（这里是我写死的数据），写在ajax的error里是为了不用后台也可以进行简单的测试

//写在error里为了方便独立测试
"error": function () {
//本地写死来模拟后台传来数据格式
var shoeSizemessege = ["23,23.5 (US 5),24 (US 6),24.5,25,25.5,26,26.5,27,27.5,28,28.5,29,30"];
//获取数组中的字符串
var arrnew = shoeSizemessege[0];
//.split()方法分解字符串
var Sizemessege = arrnew.split(",");
//添加一行
var tr = $("<tr/>").attr('class', 'addshoe');
//设置加select下拉框
var td0 = $("<select/>").attr('class','select');
//循环遍历，动态添加option的text()值
for (var i = 0; i < Sizemessege.length; i++) {
 // alert(Sizemessege.length)
    var td01 =$("<option>").text(Sizemessege[i]).attr('class','size'+i);
    td0.append(td01);
    }
    tr.append(td0);
})

第二种(若想在其他函数中使用后台传来的数据或者在ajax中写死的数据)
只需要设置一个全局变量var a；
在上述代码中的第五行后加入a = shoeSizemessege；
在其他函数中直接使用a就可以了，之后的代码照参数改一下就可以了

有什么建议或想法大家可以提出来，一起学习！