从javascript的下拉列表中获取多个值

Question

我已阅读了多个主题，但没有一个具体说明我的问题。我有一个表格作为下拉菜单。 （是的，它必须是这样）

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>

我使用得到“詹姆斯”的值的代码工作的第一个复选框输入。但是，当我取消选中输入并尝试检查新输入时，我没有看到variant_title的值。

我该如何让它比第一次迭代更有效？

Answer 1

的问题是，你使用相同的id多次。 id s必须是唯一的，这使得它们不适合你正在使用它们的东西。当你做document.getElementById('james')，你认为它会得到哪个#james？当多个元素是相同“种类”的东西时，请使用class而不是id。

另外，james,john和matt没有用id s。 id s和类名应该是描述性的。在下面的片段中，我用<span class="price">和<td id="james">与<td class="title">替换<span id="matt">。

在下面的代码，当复选框被选中，我使用jQuery的closest函数来获取复选框的行和find得到同样的行中的.title和.price。 （我也简化了标记和逻辑以使其更清晰;您需要将它与您的内容集成）。

由于您没有指定，所以在代码片段中选中第二个复选框时，它只是替换上次检查的输出。

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>

Answer 2

id在HTML中必须是唯一的，它只会得到第一个匹配，所以这就是为什么它只适用于第一个。

1日做的事情就是让ID唯一，如果你确实需要使用ID，使用id="john1"，id="john2" ...等

$('input[id^=john]')将得到所有输入ID为开始与约翰（属性选择器），因此所有john1 john2将被选中。

然后设置TX RX为“”，然后再找到所有选中的复选框：

$('.picker input[type=checkbox]:checked').each(function() { 
    var parentTr = $(this).parent().parent(); 
    tx += '<br>' + parentTr.find('.james').text(); 
    rx += '<br>' + parentTr.find('.matt').text(); 
    }); 

由于复选框TR的孙子，TD $(this).parent().parent();的孩子将得到祖父母TR，然后使用find('.james')可以在这个tr块中找到名为james的类。

构建字符串，并最终为HTML输出（）

var blocka = "test1"; 
 
$('input[id^=john]').on('change', function() { 
 
    if (this.checked) { 
 
    this.setAttribute("checked", "checked"); 
 
    this.checked = true; 
 
    } 
 
    var tx = ''; 
 
    var rx = ''; 
 
    $('.picker input[type=checkbox]:checked').each(function() { 
 
    var parentTr = $(this).parent().parent(); 
 
    tx += '<br>' + parentTr.find('.james').text(); 
 
    rx += '<br>' + parentTr.find('.matt').text(); 
 
    }); 
 
    $('.variant_title').html(tx); 
 
    $('.variant_price').html(rx); 
 

 
});

<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 class="select-closed picker" style="font-size:.75rem;float:left! 
 
    important;min-height:1.20em;"> 
 
     <td> 
 
     <input id="john1" name="updates[31435395282]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>MAPerformance Hoodie - Unisex Hoodie/Black/S - <span class="matt">$0.01</span></td> 
 
     <td class="james hide">Unisex Hoodie/Black/S - $0.01</td> 
 
    </tr> 
 
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
 
    important;min-height:1.20em;"> 
 
     <td> 
 
     <input id="john2" name="updates[31435395346]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>MAPerformance Hoodie - Unisex Hoodie/Black/M - <span class="matt">$0.01</span></td> 
 
     <td class="james hide">Unisex Hoodie/Black/M - $0.01</td> 
 
    </tr> 
 
    <tr class="select-closed picker" style="font-size:.75rem;float:left! 
 
    important;min-height:1.20em;"> 
 
     <td> 
 
     <input id="john3" name="updates[31435395410]" type="checkbox" value="31435395282:" />&nbsp;</td> 
 
     <td>MAPerformance Hoodie - Unisex Hoodie/Black/L - <span class="matt">$0.01</span></td> 
 
     <td class="james hide">Unisex Hoodie/Black/L - $0.01</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<div class="variant_price"></div>