Question

我的桌子上有选择标签。我需要计算这些选择标记中的任何选定选项是否具有可选作为其值。如果任何选择标签都选择了可选值，那么我将在其下显示一个文本字段。但是我做得不好。这是我的代码。

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

如果您可以帮助我编写代码，那就太好了。预先感谢。

Answer 1

不确定您在做什么，但是您需要在每个循环中重置计数。

$("#subject_tb tbody tr td").each(function(){
  count = 0; //Reset count
  ...
})

Answer 2

我认为您应该添加“更改”事件。

$(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/

Answer 3

由于如果要选择的值为 1（可选），因此要对选项进行计数，因此必须对 select 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>

Answer 4

您需要编写用于选择值更改事件的脚本。这是您可以做的，如果您需要更多说明，请告诉我。

$(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();
          }


      });

  });

如何计算jQuery中表格中所选选项的特定值

4 个答案: