Question

如何根据选中的复选框数填充select选项？

我的HTML页面中有5个checkboxes。如果我选中3个复选框，则select应将选项显示为1,2,3。同样，如果我选择了5个复选框，则select选项会显示值1,2,3,4,5的列表。

我正在尝试下面的代码

<div class="checkbox">
    <label><form:checkbox class="source" path="c1" value="${archbean.c1}" />Option 1</label>
</div>
<div class="form-group">
    <div class="checkbox">
        <label><form:checkbox class="source" path="c2" value="${archbean.c2}" />Option 2</label>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        <label><form:checkbox class="source" path="c3" value="${archbean.c3}" />Option 2</label>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        <label><form:checkbox class="source" path="c4" value="${archbean.c4}" />Option 2</label>
    </div>
</div>
<div class="form-group">
    <div class="checkbox">
        <label><form:checkbox class="source" path="c5" value="${archbean.c5}" />Option 2</label>
    </div>
</div>

的JavaScript

$(document).ready(function() {
var selected_value = [];
$('.source').click(function(){
    if($(this).is(':checked')){
        selected_value.push($(this).val());
        console.log(selected_value);
    } else {
        //error
    }
});

我得到的是布尔值列表但是如何在select中使用它们是个疑问。

Answer 1

类似这样的事情

$(document).ready(function() {
   $('input:checkbox').change(function() {
      if(this.checked){
         //add to select list
      }
      else{
        //remove item from select list
      }
   });
});

填充下拉表单根据选中的复选框数量进行选择

1 个答案: