Insert in 2 different select only the checked item of checkboxes

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

use jquery html to rewrite the content of S1 or S2 to match the checked boxes. — LordNeo, Jan 27 '17 at 14:00

score 0 · Accepted Answer · answered Jan 27 '17 at 14:02

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>

You're welcome. Please accept my answer and upvote it. – Rahul Patel Jan 27 '17 at 14:06 — Rahul Patel, Jan 27 '17 at 14:06

score 0 · Answer 2 · answered Jan 27 '17 at 14:02

0

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.

answered Jan 27 '17 at 14:02

MikeS

1,734
1
9
13

Yes, how can I sort the options? – Marco Jan 27 '17 at 14:24
There is a solution here: http://stackoverflow.com/questions/12073270/sorting-options-elements-alphabetically-using-jquery – MikeS Jan 27 '17 at 14:36

score 0 · Answer 3 · answered Jan 27 '17 at 14:05

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>

score 0 · Answer 4 · answered Jan 27 '17 at 14:06

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

score 0 · Answer 5 · answered Jan 27 '17 at 14:06

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.

Yes, of course! This is only a simply example. Thanks. – Marco Jan 27 '17 at 14:26 — Marco, Jan 27 '17 at 14:26
No problem, glad to help. – Rory McCrossan Jan 27 '17 at 14:28 — Rory McCrossan, Jan 27 '17 at 14:28

Insert in 2 different select only the checked item of checkboxes

5 Answers5