我的表格中有选择的标签。我需要计算这些选择标签中的任何选定选项是否具有 可选 作为其值。如果任何选择标签选择了可选值，那么我将在其下方显示一个文本字段。但我无法正确地做到这一点。这是我的代码。
<html>
<table class="table table-hover table-striped" id="subject_tb">
<thead>
<tr>
<th width="30%">Subject Name</th>
<th width="20%" class="text-center"><span style="margin-left:-64px">Choice</span>
</th>
</tr>
</thead>
<tbody id="subject_table">
<tr>
<td>Bangla</td>
<td class="td-actions text-right">
<select name="select_mandatory"
class="selectpicker select_mandatory"
data-style="btn-default btn-block btn-outline"
data-menu-style="dropdown-blue" required>
<option value="0" class="mandatory">Mandatory
</option>
<option value="1" class="optional">Optional
</option>
</select>
</td>
</tr>
<tr>
<td>English</td>
<td class="td-actions text-right">
<select name="select_mandatory"class="selectpicker select_mandatory"
data-style="btn-default btn-block btn-outline" data-menu
style="dropdown-blue" required>
<option value="0" class="mandatory">Mandatory</option>
<option value="1" class="optional">Optional
</option>
</select>
</td>
</tr>
</tbody>
</table>
<div class="row" id="optional_subject_number">
<label class="col-sm-8 col-form-label">Total
Optional Subject Per Students
</label>
<div class="col-sm-4">
<div class="form-group">
<input class="form-control" type="number"
name="optional_subject" value="" number="true"
id="optional_subject" style="margin-left: -100% !important;"/>
</div>
</div>
</div>
</html>
<script>
$(document).ready(function () {
var count = 0
$("#subject_tb tbody tr td").each(function(){
console.log($(this))
var value = $(this).find('select').val();
if(value === '1')
{
count++;
}
console.log(count)
if(count >= 0){
$('#optional_subject_number').show();
}
else{
$('#optional_subject_number').hide();
}
});
});
</script>
如果您能帮助我编写代码，那就太好了。提前致谢。
最佳答案
我认为你应该添加“更改”事件。
$(document).ready(function () {
//hide by default
$(this).find('#optional_subject_number').hide();
$( "select" ).change(function() {
var count = 0;
$("#subject_tb tbody tr").each(function(){
var value = $(this).find('select').val();
count = count + parseInt(value);
});
if(count>0){
$('#optional_subject_number').show();
}else{
$('#optional_subject_number').hide();
}
});
});
这是一个工作示例: https://jsfiddle.net/mrestnyL/11/
关于javascript - 如何计算 jQuery 表格中所选选项的特定值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53030008/