javascript - 循环遍历范围并使用 jQuery 将值分配给最近的下拉列表

Question

我的目标是从跨度中获取值并将该值分配给同一行的下拉列表。

这是我的 jsFiddle:http://jsfiddle.net/bharatgillala/581hk9Ly/4/

<table id="gridviewInfo" runatr="server">
  <tbody>
    <tr>
      <th scope=col>Available Boys.</th>
      <th scope=col>Already Selected Boy</th>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl1" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s2" class="spanclass">tom</span>
        </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl2" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s1" class="spanclass">harry</span>
        </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl3" class="judges">
          <option values="-1"></option>
          <option values="tom">tom</option>
          <option values="tom">harry</option>
          <option values="bob">bob</option>
        </select>
        <td>
          <span id="s3" class="spanclass"></span>
        </td>
    </tr>
  </tbody>
</table>

我的目标是循环遍历所有范围，如果有任何文本，则获取文本并将文本分配给最近的下拉列表。

Answer 1

我已经 answered that for you yesterday 。代码完整注释如下:

(function(d) {
  // when all the DOMElements are already loaded into the document
  d.addEventListener('DOMContentLoaded', function() {
    // gets the generated table, and get all the dropdownlists inside it
    var table = document.getElementById('gridviewInfo'),
        ddls = [].slice.call(table.querySelectorAll('.judges'));

    // loop through the dropdownlists
    ddls.forEach(function(ddl, i) {
      // get the label inside the last td
      var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;

      // change the dropdownlist selectedvalue to the label text
      ddl.value = lbl.textContent.trim();
    });
  });
})(document);

<table id="gridviewInfo" runatr="server">
  <tbody>
    <tr>
      <th scope=col>Available Boys.</th>
      <th scope=col>Already Selected Boy</th>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl1" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s2" class="spanclass">tom</span>
      </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl2" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s1" class="spanclass">harry</span>
      </td>
    </tr>
    <tr>
      <td style="WHITE-SPACE: nowrap" align=left>
        <select id="sl3" class="judges">
          <option value="-1"></option>
          <option value="tom">tom</option>
          <option value="harry">harry</option>
          <option value="bob">bob</option>
        </select>
      </td>
      <td>
        <span id="s3" class="spanclass"></span>
      </td>
    </tr>
  </tbody>
</table>

这是你的 fiddle 更新:http://jsfiddle.net/581hk9Ly/6/

<小时/>

如果你想要a jQuery version :

$(document).ready(function() {
  $('.spanclass').each(function() {
    $(this).closest('tr').find('.judges').val($(this).text());
  });
});