Question

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

注意：目前，我只能使用属性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循环中使用索引：

＆＃13;

$(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);
    })
});

＆＃13;

<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>

＆＃13;

结果将是：

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

Answer 2

如果我理解正确的话，这是一种方法。此代码不考虑不同的文本或值长度。它期望创建的选项的文本长度始终等于正在使用的值的长度。

$(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);
    })
});

小提琴：http://jsfiddle.net/32qt0vn8/

根据指定的数据属性创建包含值和文本的选择下拉选项

2 个答案: