javascript - 根据指定的数据属性创建一个带有值和文本的选择下拉选项

Question

下面是我的代码片段。我想要的是根据当前单击按钮的数据属性(data-select-text 和 data-select-values)创建一个选择下拉选项库，所以下面是一个工作片段，除了获取 data-select-values是问题，因为我不知道如何将它与数据选择文本一起循环，以便每个选择选项的结果将具有来自数据选择文本和数据选择值的拆分值的值和文本基础属性，任何想法，帮助，建议，建议？

注意:目前，我只能使用属性 data-select-text 作为选择选项值和文本。

$(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 field = '<select>';
      $.each(classList, function(index, item) {
         field += '<option value="' + item.replace(/%/g, ' ') + '">' + item.replace(/%/g, ' ') + '</option>';
      });
      field += '</select>'; 
    }
    $("body").append(field);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>

Answer 1

您可以为值创建一个数组，就像为文本创建数组一样。

确保 data-select-text 和 data-select-values 中的顺序相同。然后您可以在 $.each 循环中使用索引:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-input-type="select" data-select-text="select%1 select%2 select%3" data-select-values="1 2 3">Create a select dropdown option</button>

结果将是:

<select>
  <option value="1">select 1</option>
  <option value="2">select 2</option>
  <option value="3">select 3</option>
</select>