如何计算jQuery表中所选选项的特定值
[英]How to count a specific value of selected option in a table in jQuery
问题描述
I have select tags in my table. 
我的桌子上有选择标签。 I need to count if any of the selected option in those select tags have optional as its value. 我需要计算这些选择标记中的任何选定选项是否具有可选值。 If any of the select tag has optional value selected then i will show a text field under it. 如果任何选择标签都选择了可选值，那么我将在其下显示一个文本字段。 But I could not do it properly. 但是我做得不好。 Here is my code. 这是我的代码。
<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>
If you could help me with the code then it would be great. 如果您可以通过代码帮助我，那将很好。 Thanks in advance. 提前致谢。
4 个解决方案
解决方案1
1 2018-10-28 09:47:14
Not sure what you are doing but you need reset count each loop. 不知道您在做什么，但是您需要在每个循环中重置计数。
$("#subject_tb tbody tr td").each(function(){
count = 0; //Reset count
...
})
解决方案2
1 已采纳 2018-10-28 09:58:42
I think you should add on "change" event. 我认为您应该添加“更改”事件。
$(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();
}
});
});
Here is a working example: https://jsfiddle.net/mrestnyL/11/ 这是一个工作示例： https : //jsfiddle.net/mrestnyL/11/
解决方案3
1 2018-10-28 10:36:05
Since you want to count the option if the selected value is 1 (Optional) , you have to do the count on the change event of the select . 如果要在所选值是1（可选）的情况下对选项进行计数，则必须对select的change事件进行计数。
Also I believe, you want to show the element when if(count > 0){ not when if(count >= 0){ . 我也相信，您想在if(count > 0){时显示该元素，而不是if(count >= 0){ 。
You can try the following way: 您可以尝试以下方式：
$(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>
解决方案4
0 2018-10-28 09:56:06
You need to write a script for select value change event. 您需要编写用于选择值更改事件的脚本。 Here is what you can do and if you need any more clarification, let me know. 这是您可以做的，如果您需要更多说明，请告诉我。
$(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();
}
});
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.