從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>