Question

我的表格中有几个选择。如果一个选择已更改其选项，则应增加计数器。 5选择然后计数器应该是5.基本上我想检查我的所有选择是否已被选中，所以我可以提交表格。我不想使用“必需”。

<div id="firstPanelID"
    <div class="form-group input-group">
        <label class="fixingLabelAlignmentInner">Transfer Code of Center from which Infant Transferred : </label>
        <div class="fixingInputAlignmentInner">
            <select id="transferCodePIW" name=transferCodePIW class="form-control" style="height:32px;width:80%;">
            <option disabled selected value>SELECT</option>
            <option value="13240">13240 - Mowbray Maternity Hospital</option>
            <option value="14994">14994 - New Somerset Hospital</option>
            <option value="16011">16011 - Tygerberg Hospital</option>
            <option value="8005432">8005432 - Khayelitsha District Hospital</option>
            <option value="8005433">8005433 - Michell's Plain District Hospital</option>
            <option value="8005435">8005435 - Red Cross Children's Hospital</option>
            <option value="97777777">97777777 - Birth at Home or in Transit</option>
            <option value="">Other</option>
            <option value="77777777">N/A</option>
            <option value="99999999">Unknown</option>
        </select>
        </div>
    </div>
</div>

我已尝试过以下内容。由于其他单选按钮因此可见，所以选择可以是可见/不可见的。该功能适用于单选按钮，但我不能让它适用于选择。

var sgroups = [];
    $('#firstPanelID select:visible:selected').each(function(index, el){
            var i;
            for(i = 0; i < sgroups.length; i++)
                if(sgroups[i] == $(el).attr('name'))
                    return true;
            sgroups.push($(el).attr('name'));
        }
    );
alert(($('#firstPanelID select:visible:selected').length))

Answer 1

我认为代码是不言自明的。

＆＃13;

var counter = 0;

$('select').change(function () {
  var o = $(this);
	if (!o.hasClass('counted')) {
  	counter++;
    o.addClass('counted');
   }
    
  $('#counter').text(counter);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="aa">aa</option>
<option value="bb">bb</option>
<option value="cc">cc</option>
</select>
<select>
<option value="2aa">2aa</option>
<option value="2bb">2bb</option>
<option value="2cc">2cc</option>
</select>
<select>
<option value="3aa">3aa</option>
<option value="3bb">3bb</option>
<option value="3cc">3cc</option>
</select>

<div id="counter">
0
</div>

＆＃13;

Answer 2

当.one()等于change来电<select>时，您可以使用count向每个$("selector").length元素附加单个.off()个事件删除change事件，然后执行操作，例如，提交<form>元素。

let count = 0;

$("select").one("change", function() {

  ++count;
  
  console.log(count);
  if (count === $("select").length) {
    $("select").off("change");
    // submit form here
    console.log(count + " is " + $("select").length)
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>

Answer 3

如果要检查是否已选中所有选择，并假设每个选择都有一个空值，则可以执行以下操作：

function isThereAnyEmptySelection () {
    let r = false;
    $('select').each(function () {
        if ($(this).val() === '') { // or === null, or === undefined, or === '0' etc., depending on context
            r = true;
        }
    });
    return r;
}

如何计算在Jquery / Javascript中具有值更改的表单选择的数量

3 个答案: