Question

我创建了一个函数，它读取一些div的内容并将它们放入一个数组中。我的div组织如下：

<div class="row clearfix" id="moltiplicandum1">
    <div class="column third">
        <select id="test_set" type="text" style="width:100%">
            <option selected disabled value="">Select...</option>
            <option value="set1">set1</option>
            <option value="set2">set2</option>
        </select>
    </div>
    <div class="column third">
        <select id="avail_cat" type="text" style="width:100%">
            <option selected disabled value="">Select...</option>
            <option value="cat1">cat1</option>
            <option value="cat2">cat2</option>
        </select>
    </div>
    <div class="column third">
        <select id="avail_class" type="text" style="width:100%">
            <option selected disabled value="">Select...</option>
            <option value="class1">class1</option>
            <option value="class2">class2</option>
        </select>
    </div>
</div>
<div class="row clearfix" id="moltiplicandum#">...</div>

从moltiplicandum1到任意montiplicandum#（所有通过js使用按钮创建）。因此，为每个“moltiplicandum”读取所有“select”内容的函数会返回错误：

TypeError：div为null

在var divs = div.getElementsByTagName('select');行。这里的功能是：

var divArray = [];

for(var i = 1; i < 10; i++) {
    var div = document.getElementById("moltiplicandum"+i);
    var divs = div.getElementsByTagName('select');

    for (var j = 0; j < divs.length; j += 1) {
        divArray.push($(divs[j]).val());
    }
}

如果我评论外部for，定义var i = 1，则可行（仅适用于“moltiplicandum1”）。

有人可以帮我解决问题吗？谢谢你

Answer 1

我不确定你所展示的任何代码与递归或AJAX有什么关系，但是鉴于你的目标是从select元素构建所有值的数组，你可以简单地使用jQuery的map()方法。

您还可以向moltiplicandumN元素添加公共类，以便您可以对逻辑进行泛化。试试这个：

$('.moltiplicandum select').change(function() {
  var selectArray = $('.moltiplicandum select').map(function() {
    return this.value;
  }).get();
  console.log(selectArray)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row clearfix moltiplicandum" id="moltiplicandum1">
  <div class="column third">
    <select id="test_set1" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="set1">set1</option>
      <option value="set2">set2</option>
    </select>
  </div>
  <div class="column third">
    <select id="avail_cat1" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="cat1">cat1</option>
      <option value="cat2">cat2</option>
    </select>
  </div>
  <div class="column third">
    <select id="avail_class1" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="class1">class1</option>
      <option value="class2">class2</option>
    </select>
  </div>
</div>

<div class="row clearfix moltiplicandum" id="moltiplicandum2">
  <div class="column third">
    <select id="test_set2" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="set1">set1</option>
      <option value="set2">set2</option>
    </select>
  </div>
  <div class="column third">
    <select id="avail_cat2" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="cat1">cat1</option>
      <option value="cat2">cat2</option>
    </select>
  </div>
  <div class="column third">
    <select id="avail_class2" type="text" style="width:100%">
      <option selected disabled value="">Select...</option>
      <option value="class1">class1</option>
      <option value="class2">class2</option>
    </select>
  </div>
</div>

另外，请注意重复id属性。我在上面的HTML中为重复的id控件的select添加了一个数值。

Answer 2

如果您使用的是jquery，为什么不简单地使用选择器呢？像这样：

selectArray = Array.prototype.map.call($(".moltiplicandum select"),(function(el){
 return el.value;
});

递归读取div内容并通过AJAX发布

2 个答案: