Как посчитать конкретное значение выбранной опции в таблице в jQuery - PullRequest
Новая
       1

Как посчитать конкретное значение выбранной опции в таблице в jQuery

0 голосов
/ 28 октября 2018

У меня есть выбранные теги в моей таблице.Мне нужно посчитать, если какой-либо из выбранных параметров в этих тегах выбора имеет необязательно в качестве значения.Если для какого-либо из тегов выбора выбрано необязательное значение, то я покажу текстовое поле под ним.Но я не мог сделать это правильно.Вот мой код. 

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

Если бы вы могли помочь мне с кодом, было бы здорово.Заранее спасибо.

Ответы [ 4 ]

0 голосов
/ 28 октября 2018

Так как вы хотите посчитать опцию, если выбранное значение 1 (необязательно) , необходимо выполнить подсчет события change выбора select .

Также я считаю, что вы хотите показать элемент, когда 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>
0 голосов
/ 28 октября 2018

Вам нужно написать скрипт для события выбора значения.Вот что вы можете сделать, и если вам нужно больше разъяснений, дайте мне знать. 

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


      });

  });
0 голосов
/ 28 октября 2018

Я думаю, вы должны добавить событие "изменить". 

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

0 голосов
/ 28 октября 2018

Не уверен, что вы делаете, но вам нужно сбросить счетчик каждого цикла. 

$("#subject_tb tbody tr td").each(function(){
  count = 0; //Reset count
  ...
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...