我的表中有select标记。我需要计算这些select标记中的任何选定选项是否有可选作为其值。如果select标记中的任何一个选择了可选值，那么我会在它下面显示一个文本字段。但我无法正确执行。这是我的密码。
<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/
不确定你在做什么，但你需要重置每个循环的计数。
$("#subject_tb tbody tr td").each(function(){
count = 0; //Reset count
...
})
如果所选值为1(可选(，则需要对选项进行计数，因此必须对选择的change事件进行计数。
此外，我相信，您希望在if(count > 0){时显示元素，而不是在if(count >= 0){时显示元素。
您可以尝试以下方式：
$(document).ready(function () {
var el = $('#optional_subject_number');
var count = 0;
$('.selectpicker').change(function(){
$(this).val() == '1'? count++ : count--;
if(count > 0){
$(el).text('Total Optional Subject Per Students ' + count);
$(el).show();
}
else{
$(el).hide();
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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">
</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>您需要为select value change事件编写一个脚本。以下是你可以做的，如果你需要更多的澄清，请告诉我。
$(document).ready(function () {
$("#subject_tb tbody tr td select").change();
});
$(document).on("change", "#subject_tb tbody tr td select", function(){
var count = 0;
$("#subject_tb tbody tr td select").each(function(){
var value = $(this).val();
if(value === '1')
{
count++;
}
if(count >= 1)
{
$('#optional_subject_number').show();
}
else
{
$('#optional_subject_number').hide();
}
});
});