javascript - 使用JavaScript从下拉列表中获取多个值

我读了很多文章，但没有一篇专门谈到我的问题。我有一张桌子作为下拉菜单。（是的，必须是这样）

var blocka = "test1"
$('#john').on('change', function() {
  if (this.checked) {
    this.setAttribute("checked", "checked");
    this.checked = true;
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var tx = document.getElementById('james').innerHTML;
    $('.variant_title').text(tx);
  }
  if (this.checked) {
    //checkbox clicked is now checked
    var rx = document.getElementById('matt').innerhtml;
    $('.variant_price').text(rx);
  } else {
    this.setAttribute("checked", ""); // For IE
    this.removeAttribute("checked"); // For other browsers
    this.checked = false;
    $('.variant_title').empty();
    $('.variant_price').empty();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="special-select">
  <tbody>
    <tr>
      <td>
        <span class="selecter-selected variant_title" name="click_me" style="height:40px! important;"></span>
      </td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left!
     important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left!
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr id="picker" class="select-closed" style="font-size:.75rem;float:left!
    important;min-height:1.20em;">
      <td><input id="john" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span id="matt">$0.01</span></td>
      <td id="james" class="hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
  <div class="variant_price"></div>
</table>

我用来获取“james”值的代码用于第一个复选框输入。但是，当我取消选中输入并尝试选中一个新的输入时，我没有得到变量标题的值。
如何使它在第一次迭代之后继续工作？

最佳答案

问题是您多次使用同一个id。ids必须是唯一的，这使得它们不适合您使用它们的目的。当你这样做的时候，你希望它得到什么？当多个元素是相同的“种类”时，使用document.getElementById('james')，而不是#james。
顺便说一下，class、id和james都没有用。johns和类名应该是描述性的。在下面的代码片段中，我用matt替换了id，用id替换了<span id="matt">。
在下面的代码中，当复选框被选中时，我使用jQuery的<span class="price">函数获取复选框的行，并使用<td id="james">函数获取同一行中的<td class="title">和closest。（我还简化了标记和逻辑，使其更清晰；您需要将其与现有的内容集成起来。）
因为您没有指定，所以在代码段中，当选中第二个复选框时，它只会替换上一个复选框的输出。

var $variantTitle = $('.variant_title');
var $variantPrice = $('.variant_price');

$('#products :checkbox').on('change', function() {
  if (this.checked) {
    var $row = $(this).closest('tr');
    var title = $row.find('.title').text();
    var price = $row.find('.price').text();
    $variantTitle.text(title);
    $variantPrice.text(price);
  } else {
    $variantTitle.empty();
    $variantPrice.empty();
  }
});

body{font-size:.75rem}
.hide{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
  <tbody>
    <tr>
      <td>
        <span class="variant_title"></span>
      </td>
    </tr>
    <tr>
      <td><input name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / S - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / S - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / M - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / M - $0.01</td>
    </tr>
    <tr>
      <td><input name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td>
      <td>MAPerformance Hoodie - Unisex Hoodie / Black / L - <span class="price">$0.01</span></td>
      <td class="title hide">Unisex Hoodie / Black / L - $0.01</td>
    </tr>
  </tbody>
</table>

<div class="variant_price"></div>