Javascript 插入两个不同的复选框，仅选择复选框中的选中项

我有许多同名的复选框：

<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
   <option value=""></option>
</select>
 <select name="S2">
   <option value=""></option>
</select>

A
B
C
D

每次更改状态时，我希望在两个select中只有选中的值。 例子： 如果我选中A和C，则选择2个选项：

<select name="S1">
   <option value=""></option>
   <option value="A">A</option>
   <option value="C">C</option>
</select>
<select name="S2">
   <option value=""></option>
   <option value="A">A</option>
   <option value="C">C</option>
</select>

A.
C
A.
C

如果我取消选中A并选中D（因此C保留）：

C
D
C
D

---

等等…

请检查下面的工作snnipet

$（“输入[type='checkbox']）。在（“更改”，函数（）上）{
if（$（this）.prop（“选中”）==true）{
$（“选择[name='S1']，选择[name='S2']”）。追加（“”+$（this.val（）+“”）；
}否则{
$（“选择[name='S1']选项[value=”+$（this.val（）+”），选择[name='S2']选项[value=”+$（this.val（）+“]）。删除（）；
}
});

A.
B
C
D
试试这个例子：

$（文档）.ready（函数（）{
$（“.convati”）。单击（函数（）{
var thisVal=$（this.val（）；
调试器；
如果（$（this）.is（“：checked”））
{
$（“.convatiSelect”）.append（$（“”）.attr（'value'，thisVal）.html（thisVal））；
}
否则{
var option=$（“.convatiSelect”）.find（“option[value='”+thisVal+']）.remove（）；
}
});
});

添加选项后，您可能需要对其进行排序。
试试这个-


$（'input[type=checkbox][name^=convati]'）。更改（函数（）{
$（'select'）.html（“”）；
var option=新选项（“，”）；
$（'select'）。追加（$（选项））；
$（'input[type=checkbox][name^=convati]：checked'）。每个（函数（）{
var option=新选项（$（this.val（），$（this.val（））；
$（'select'）。追加（$（选项））；
});
})

A.
B
C
D
您可以使用以下脚本使其按预期工作

请在下面的代码中查找每个步骤中添加的注释，以获取您的输出

$(function(){

     //First bind a Change event for all checkbox  
     $("inputt[type='checkbox']").change(function(){

     //We will create on array of values which will hold fresh values of all checkboxes on each change
      var values =[];


       // Now we will fill our values array and add values for checked checkboxes
       $("inputt[type='checkbox']").filter(":checked").each(function(){
             values.push($(this).val());
        }
  );

  // Once we get all values which are checked, we just need to create option template like following
   var options= "";
   for(i=0; i< values.length;i++)
   {
       options+="<option>" + values[i] + "</option>";     
    }

    // SET INNER HMTL of target select once with option template
    $("select[name=S1]").html(options);
    $("select[name=S2]").html(options);
  });
});


<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
   <option value=""></option>
</select>
 <select name="S2">
   <option value=""></option>
</select>

$（函数（）{
//首先为所有复选框绑定更改事件
$（“input[type='checkbox']）。更改（函数（）{
//我们将创建一个值数组，该数组将保存每次更改时所有复选框的新值
var值=[]；
//现在，我们将填充值数组并为复选框添加值
$（“input[type='checkbox']”）。过滤器（“：checked”）。每个（函数（）{
value.push（$（this.val（））；
}
);
//一旦我们得到所有选中的值，我们只需要创建如下所示的选项模板
var期权=”；
对于（i=0；i

请选中
要实现此目的，您可以使用
map（）
从包含所需HTML的选中复选框构建一个数组，然后将其设置为
select（）
元素的
HTML（）
。试试这个：


$（':checkbox'）。更改（函数（）{
var html=''；
html+=$（'：复选框：选中'）.map（函数（）{
返回“”+this.value+“”；
}).get（）.join（“”）；
$（'select'）.html（html）；
});

A.
B
C
D
使用jquery html重写S1或S2的内容以匹配复选框。如何操作？：我是jQueryJavaScripte的新手，不客气。请接受我的答案并投票表决。是的，我如何对选项进行排序？这里有一个解决方案：是的，当然！这只是一个简单的例子。谢谢。没问题，很乐意帮忙。
$(document).ready(function(){
  $(".convocati").click(function(){
     var thisVal = $(this).val();
     debugger;
     if ($(this).is(":checked"))
     {
        $(".convatiSelect").append($("<option>").attr('value', thisVal).html(thisVal));
      }
     else{
       var option = $(".convatiSelect").find("option[value='" + thisVal + "']").remove();
     }
  });
});

$(function(){

     //First bind a Change event for all checkbox  
     $("inputt[type='checkbox']").change(function(){

     //We will create on array of values which will hold fresh values of all checkboxes on each change
      var values =[];


       // Now we will fill our values array and add values for checked checkboxes
       $("inputt[type='checkbox']").filter(":checked").each(function(){
             values.push($(this).val());
        }
  );

  // Once we get all values which are checked, we just need to create option template like following
   var options= "";
   for(i=0; i< values.length;i++)
   {
       options+="<option>" + values[i] + "</option>";     
    }

    // SET INNER HMTL of target select once with option template
    $("select[name=S1]").html(options);
    $("select[name=S2]").html(options);
  });
});


<input type="checkbox" name="convocati[]" value="A">A
<input type="checkbox" name="convocati[]" value="B">B
<input type="checkbox" name="convocati[]" value="C">C
<input type="checkbox" name="convocati[]" value="D">D
<select name="S1">
   <option value=""></option>
</select>
 <select name="S2">
   <option value=""></option>
</select>