挿入は、チェックボックスだけにチェック項目を選択

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> 

すべての変更ステータスが、私は2つの選択で値のみがチェックされていることを願っています。 例： 私は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> 

は、これはあなたが必要なHTMLが含まれて確認チェックボックスから配列を作成し、その後select()要素のhtml()として設定するmap()を使用することができます達成するためにworking Fiddle

Answer 5

を確認してください。これは、このような:checkboxと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>

注：これを試してみてください。プロダクション環境では、要素をより具体的に識別するために使用できるクラスをいくつか用意することを強くお勧めします。