Question

我有各种相同名称的复选框：

<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和C，则2 SELECT将是：

<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并检查D（所以C保持不变）：

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

依旧......

Answer 1

请检查以下工作snnipet。

$("input[type='checkbox']").on("change",function(){
  if($(this). prop("checked") == true){
    $("select[name='S1'],select[name='S2']").append('<option value="'+$(this).val()+'">'+$(this).val()+'</option>');
  }else{
    $("select[name='S1'] option[value='"+$(this).val()+"'],select[name='S2'] option[value='"+$(this).val()+"']").remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 2

试试这个例子：https://jsfiddle.net/mccoe8v6/

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

您可能希望在添加选项后对其进行排序。

Answer 3

试试这个 -

$('input[type=checkbox][name^=convocati]').change(function() {
  $('select').html('');
  var option = new Option("", "");
  $('select').append($(option));
  $('input[type=checkbox][name^=convocati]:checked').each(function() {
    var option = new Option($(this).val(), $(this).val());
    $('select').append($(option));
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 4

您可以使用以下脚本使其按预期工作

请在每个步骤中添加以下代码中的注释以获得输出

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

请查看 working Fiddle

Answer 5

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

$(':checkbox').change(function() {
  var html = '<option value=""></option>';
  html += $(':checkbox:checked').map(function() {
    return '<option value="' + this.value + '">' + this.value + '</option>';
  }).get().join('');

  $('select').html(html);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

请注意，这是使用通用选择器，例如:checkbox和select。在生产环境中，我强烈建议您为元素提供一些类，您可以使用这些类来更具体地识别它们。

插入2个不同的选择仅选中复选框的项目

5 个答案: