插入2種不同的復選框中，僅選中復選框

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

請檢查以下工作片段。

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

請檢查工作提琴

Answer 5

為此，您可以使用map()從選中的復選框構建一個包含所需HTML的數組，然后將其設置為select()元素的html() 。 嘗試這個：

 $(':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 。 在生產環境中，我強烈建議您為元素提供一些類，這些類可用於更具體地標識它們。