Question

我从famous example了解到如何使用ID进行此操作，我最喜欢这个解决方案：

var options = $('#selectBox option');

var values = $.map(options ,function(option) {
    return option.value;
});

我在一个单独的容器中有许多重复块：

<div class="section">
  <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>


  <select class='helperBox' id='helperBox' >
        <option val='AB'>AB</option>
        <option val='BCD'>BCD</option>
        <option val='C'>C</option>
        <option val='AD'>AD</option>

      </select>
  <label>Result <input type="text" value="10" class="result" ></label>

</div>

<div class="section">
  <label><input type="checkbox" name="A" value="2" class="factor-checkbox">A</label>

  <select  class='helperBox'>
        <option val='B'>B</option>
        <option val='BD'>BD</option>
        <option val='AC'>AC</option>
        <option val='C'>C</option>
      </select>
  <label>Result <input type="text" value="20" class="result" ></label>

</div>

以下功能有效：

function loadCombos($section) {
    var $section = $(this).closest(".section");
    //var $combos = $section.find('.helperBox');
    var options = $('#helperBox option');

    var combos = $.map(options,function(option) {
    return option.value;
    });

    console.log(combos);

    return combos;

  }

但显然只有一个helperBox。如何让它适用于每个部分的许多人。以便combos数组在不同的部分有所不同吗？

Answer 1

你可以使用它的范围（假设this里面loadCombos指的是section div中的按钮）：

function loadCombos() {
  var $section = $(this).closest(".section");
  var $combos = $section.find('.helperBox'); //<-- only select in this section
  var options = $combos.find('option');      //<-- only options of current select
  var combos = $.map(options, function(option) {
    return option.value;
  });

  console.log(combos);
  return combos;
}

Answer 2

ID在CSS中是唯一的。您可以将ID更改为类或具有单独的ID，并具有公共类名。

<div id="helperbox1" class="helperbox"></div>
<div id="helperbox2" class="helperbox"></div>

或使用两个类，如

 <div class="helperbox b1"></div>

如何在类上使用jQuery获取select的所有选项，而不是ID？

2 个答案: