插入2种不同的复选框中，仅选中复选框

Question

I have various checkboxes with the same name:

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

Every change status, I wish that in the two select there are only checked values. Example: If I check A and C, the 2 SELECT will be:

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

If I uncheck A and check D (So C remain):

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

and so on...

Answer 1

Please check below working 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

Try this example: 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();
     }
  });
});

You may want to sort the options after adding them.

Answer 3

Try This -

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

You can use following script to make it work as expected

Please find comments in code below added on each step to get your output

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

Please check the working Fiddle

Answer 5

To achieve this you can use map() to build an array from the checked checkboxes which contains the required HTML and then set it as the html() of the select() elements. Try this:

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

Note that this is using generic selectors, such as :checkbox and select . In a production environment I'd strongly suggest you give your elements some classes which you can use to identify them more specifically.