Javascript 根据指定的数据属性创建带有值和文本的“选择”下拉选项

下面是我的片段。我想要的是从当前单击按钮的数据属性（数据选择文本和数据选择值）创建一个选择下拉选项库，下面是一个工作片段，除了获取数据选择值，这是一个问题，因为我不知道如何将其与数据选择文本一起循环，以便每个选择选项的结果将具有来自数据选择文本和数据选择值属性的拆分值的值和文本库，以及任何想法、帮助和建议，推荐

注意：目前，我只能使用属性数据选择文本作为选择选项值和文本

$（文档）.ready（函数（）{
$（文档）。在（“单击”，“按钮”，函数（）上）{
if（$（this）.attr（“数据输入类型”）.toLowerCase（）=“选择”）{
var classList=$（this.attr（'data-select-text'）.split（/\s+/）；
变量字段=“”；
$.each（类列表、函数（索引、项）{
字段+=''+项。替换（/%/g''）+''；
});
字段+=''；
}
$（“正文”）.append（字段）；
})
});

创建一个选择下拉选项
如果我理解正确，这里有一种方法。此代码不考虑不同的文本或值长度。它希望所创建选项的文本长度始终等于所使用的值长度

$(document).ready(function () {
    $(document).on("click", "button", function () {
        if ($(this).attr("data-input-type").toLowerCase() === "select") {
            var classList = $(this).attr('data-select-text').split(/\s+/);
            var valueList = $(this).attr('data-select-values').split(' ');
            var field = '<select>';
            $.each(classList, function (index, item) {
                field += '<option value="' + valueList[index] + '">' + item.replace(/%/g, ' ') + '</option>';
            });
            field += '</select>';
        }
        $("body").append(field);
    })
});

$（文档）.ready（函数（）{
$（文档）。在（“单击”、“按钮”上，函数（）{
if（$（this）.attr（“数据输入类型”）.toLowerCase（）=“选择”）{
var classList=$（this.attr（'data-select-text'）.split（/\s+/）；
var valueList=$（this.attr（'data-select-values'）.split（''）；
变量字段=“”；
$.each（类列表、函数（索引、项）{
字段+=''+项。替换（/%/g''）+''；
});
字段+=''；
}
$（“正文”）.append（字段）；
})
});

Fiddle:
您可以为值创建一个数组，与文本一样

确保
数据选择文本
和
数据选择值
的顺序相同。然后，您可以在
$中使用索引。每个
循环：


$（文档）.ready（函数（）{
$（文档）。在（“单击”，“按钮”，函数（）上）{
var elem=$（本）；
if（elem.attr（“数据输入类型”）.toLowerCase（）=“选择”）{
var classList=elem.data（'select-text'）.split（/\s+/），
valueList=elem.data（'select-values'）。拆分（/\s+/），
字段=“”；
$.each（类列表、函数（索引、项）{
字段+=''+项。替换（/%/g''）+''；
});
字段+=''；
}
$（“正文”）.append（字段）；
})
});

创建一个选择下拉选项
很好，正是我所想的。工作很有魅力！非常感谢。太好了，正是我所想的。工作很有魅力！非常感谢。